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:
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user