From b45a6cd0339224b485fa74f16b2d48dd3a575396 Mon Sep 17 00:00:00 2001
From: "reza.g" <rezagoli.1385@gmail.com>
Date: Tue, 8 Sep 2026 16:04:02 +0330
Subject: [PATCH] fix(inventory): keep Organization page actions within mobile
 bounds

On /inventory/org two container rows could not shrink or wrap and
overflowed past the left edge on phones (RTL), forcing horizontal
scrolling:

- the add-warehouse form was a non-wrapping flex row of fixed-width
  inputs (w-44 + w-52) plus the button (~500px total); it now stacks
  vertically below sm (full-width fields and button) and returns to the
  inline layout at sm+
- each warehouse row's action cluster (dashboard / move-project select /
  delete) is now flex-wrap with justify-end, and the name block is
  flex-1 so a long select option can no longer push the buttons out of
  the card on narrow viewports

Desktop layout is unchanged; containerized rows stay within the page.
---
 frontend/src/pages/Inventory/OrganizationPage.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Inventory/OrganizationPage.tsx b/frontend/src/pages/Inventory/OrganizationPage.tsx
index 77bb8b9..8acbbb4 100644
--- a/frontend/src/pages/Inventory/OrganizationPage.tsx
+++ b/frontend/src/pages/Inventory/OrganizationPage.tsx
@@ -294,11 +294,11 @@ export function OrganizationPage() {
                   <div className="mb-2 flex flex-col gap-1.5">
                     {whs.map((w) => (
                       <div key={w.id} className="flex items-center justify-between gap-2 rounded-lg border border-line px-3 py-2 text-[12.5px]">
-                        <div className="min-w-0">
+                        <div className="min-w-0 flex-1">
                           <b>{w.name}</b>
                           <small className="block truncate text-muted">{w.description || ""}</small>
                         </div>
-                        <div className="flex items-center gap-1.5">
+                        <div className="flex flex-wrap items-center justify-end gap-1.5">
                           <button
                             className="rounded-lg border border-accent/40 bg-accent/5 px-2 py-1 text-[10.5px] font-bold text-accent"
                             onClick={() => navigate(`/inventory?warehouse=${w.id}`)}
@@ -322,20 +322,20 @@ export function OrganizationPage() {
                     ))}
                   </div>
                 )}
-                <div className="flex gap-2">
+                <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
                   <input
-                    className="h-8 w-44 rounded-lg border border-line bg-panel px-2 text-sm"
+                    className="h-8 w-full rounded-lg border border-line bg-panel px-2 text-sm sm:w-44"
                     placeholder="نام انبار جدید"
                     value={newWh[p.id] || ""}
                     onChange={(e) => setNewWh((s) => ({ ...s, [p.id]: e.target.value }))}
                   />
                   <input
-                    className="h-8 w-52 rounded-lg border border-line bg-panel px-2 text-sm"
+                    className="h-8 w-full rounded-lg border border-line bg-panel px-2 text-sm sm:w-52"
                     placeholder="توضیحات (اختیاری)"
                     value={newWhDesc[p.id] || ""}
                     onChange={(e) => setNewWhDesc((s) => ({ ...s, [p.id]: e.target.value }))}
                   />
-                  <button className="rounded-lg bg-accent px-3 py-1.5 text-[12px] font-bold text-white" onClick={() => void addWarehouse(p.id)}>
+                  <button className="w-full rounded-lg bg-accent px-3 py-2 text-[12px] font-bold text-white sm:w-auto sm:py-1.5" onClick={() => void addWarehouse(p.id)}>
                     + افزودن انبار
                   </button>
                 </div>