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.
This commit is contained in:
2026-09-08 16:04:02 +03:30
parent f0e424316e
commit b45a6cd033
@@ -294,11 +294,11 @@ export function OrganizationPage() {
<div className="mb-2 flex flex-col gap-1.5"> <div className="mb-2 flex flex-col gap-1.5">
{whs.map((w) => ( {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 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> <b>{w.name}</b>
<small className="block truncate text-muted">{w.description || ""}</small> <small className="block truncate text-muted">{w.description || ""}</small>
</div> </div>
<div className="flex items-center gap-1.5"> <div className="flex flex-wrap items-center justify-end gap-1.5">
<button <button
className="rounded-lg border border-accent/40 bg-accent/5 px-2 py-1 text-[10.5px] font-bold text-accent" 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}`)} onClick={() => navigate(`/inventory?warehouse=${w.id}`)}
@@ -322,20 +322,20 @@ export function OrganizationPage() {
))} ))}
</div> </div>
)} )}
<div className="flex gap-2"> <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
<input <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="نام انبار جدید" placeholder="نام انبار جدید"
value={newWh[p.id] || ""} value={newWh[p.id] || ""}
onChange={(e) => setNewWh((s) => ({ ...s, [p.id]: e.target.value }))} onChange={(e) => setNewWh((s) => ({ ...s, [p.id]: e.target.value }))}
/> />
<input <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="توضیحات (اختیاری)" placeholder="توضیحات (اختیاری)"
value={newWhDesc[p.id] || ""} value={newWhDesc[p.id] || ""}
onChange={(e) => setNewWhDesc((s) => ({ ...s, [p.id]: e.target.value }))} 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> </button>
</div> </div>