From 54d029cf14868187350e13bedf52b7880ab5afdc Mon Sep 17 00:00:00 2001
From: davidels1 <87242587+davidels1@users.noreply.github.com>
Date: Thu, 25 Sep 2025 23:18:24 +0200
Subject: [PATCH] Enhance responsiveness of PurchaseOrderForm and enable
 horizontal scrolling in Stock page

---
 src/components/purchase-orders/PurchaseOrderForm.tsx | 6 +++---
 src/pages/Stock.tsx                                  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/purchase-orders/PurchaseOrderForm.tsx b/src/components/purchase-orders/PurchaseOrderForm.tsx
index b42a57a..920ac87 100644
--- a/src/components/purchase-orders/PurchaseOrderForm.tsx
+++ b/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>
                 )}
diff --git a/src/pages/Stock.tsx b/src/pages/Stock.tsx
index 068277e..30dbfb8 100644
--- a/src/pages/Stock.tsx
+++ b/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}