Layout fixes

This commit is contained in:
2026-03-11 14:59:29 -05:00
parent 001d7ad3c1
commit 6617574c16
8 changed files with 59 additions and 47 deletions
@@ -43,20 +43,22 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
{props.unassignedItems.length} Items Pending
</span>
</div>
{/* Sticky Column Headers for Unassigned */}
<div class="sticky top-header z-10 bg-background/95 backdrop-blur-sm border-b border-border py-3 mb-4 hidden md:flex items-center gap-4 text-[10px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] px-3">
<div class="w-4"></div>
<div class="flex-1">Description</div>
<div class="w-20 text-right">Qty</div>
<div class="w-24 text-right">Unit Price</div>
<div class="w-24 text-right">Subtotal</div>
<Show when={props.isSidebarCollapsed() || !props.anyDescriptionIsLong()}>
<div class="w-32 text-center">Markup</div>
<div class="w-32 text-center">Contingency</div>
</Show>
<div class="w-28 text-right px-2">Total</div>
<div class="w-16"></div>
</div>
<div class="overflow-x-auto w-full pb-4 -mx-6 px-6">
<div class="min-w-[768px]">
{/* Sticky Column Headers for Unassigned */}
<div class="sticky top-header z-10 bg-background/95 backdrop-blur-sm border-b border-border py-3 mb-4 hidden md:flex items-center gap-4 text-[10px] font-black text-muted-foreground/60 uppercase tracking-[0.2em] px-3">
<div class="w-4 shrink-0"></div>
<div class="flex-1 min-w-[200px]">Description</div>
<div class="w-20 shrink-0 text-right">Qty</div>
<div class="w-24 shrink-0 text-right">Unit Price</div>
<div class="w-24 shrink-0 text-right">Subtotal</div>
<Show when={props.isSidebarCollapsed() || !props.anyDescriptionIsLong()}>
<div class="w-32 shrink-0 text-center">Markup</div>
<div class="w-32 shrink-0 text-center">Contingency</div>
</Show>
<div class="w-28 shrink-0 text-right">Total</div>
<div class="w-16 shrink-0"></div>
</div>
<div class="grid gap-2">
<For each={props.unassignedItems}>
@@ -78,6 +80,8 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
)}
</For>
</div>
</div>
</div>
</div>
</Show>
);