Enhance responsiveness of PurchaseOrderForm and enable horizontal scrolling in Stock page

src/components/purchase-orders/PurchaseOrderForm.tsx

@@ -267,7 +267,7 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
         <div className="border p-4 rounded-md">
           <h3 className="text-lg font-semibold mb-4">Order Items</h3>
           {form.getValues("items").map((item, index) => (
-            <div key={index} className="grid grid-cols-5 gap-4 mb-4 items-center">
+            <div key={index} className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-4 mb-4 items-center">
               <FormField
                 control={form.control}
                 name={`items.${index}.itemName`}
@@ -335,9 +335,9 @@ export function PurchaseOrderForm({ setOpen, refreshData }: PurchaseOrderFormPro
                   </FormItem>
                 )}
               />
-              <div className="flex justify-center">
+              <div className="flex justify-center md:justify-start">
                 {form.getValues("items").length > 1 && (
-                  <Button type="button" variant="outline" size="icon" onClick={() => removeItem(index)}>
+                  <Button type="button" variant="outline" size="icon" onClick={() => removeItem(index)} className="w-full sm:w-auto">
                     -
                   </Button>
                 )}

src/pages/Stock.tsx

@@ -77,7 +77,7 @@ const Stock = () => {
           </DialogContent>
         </Dialog>
       </div>
-      <div className="w-full overflow-hidden">
+      <div className="w-full overflow-x-auto">
         <DataTable
           columns={columns}
           data={stockItems}