header fix

This commit is contained in:
2026-03-11 15:03:59 -05:00
parent 6617574c16
commit a07b145c76
3 changed files with 37 additions and 25 deletions
+13 -12
View File
@@ -203,8 +203,8 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }} onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
class="p-6 space-y-4 relative" class="p-6 space-y-4 relative"
> >
<div class="overflow-x-auto w-full pb-4 -mx-6 px-6"> <Show when={scopeItems().length > 0}>
<div class="min-w-[768px]"> <div class="relative pb-4">
{/* Column Headers - Sticky, Square Top */} {/* Column Headers - Sticky, Square Top */}
<div class="sticky top-header z-20 bg-background/95 backdrop-blur-sm border-b border-border py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3 rounded-none"> <div class="sticky top-header z-20 bg-background/95 backdrop-blur-sm border-b border-border py-2 mb-2 hidden md:flex items-center gap-4 text-[10px] font-bold text-muted-foreground uppercase tracking-wider px-3 rounded-none">
<div class="w-4 shrink-0"></div> {/* Grip space */} <div class="w-4 shrink-0"></div> {/* Grip space */}
@@ -220,9 +220,9 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
<div class="w-16 shrink-0"></div> {/* Action space */} <div class="w-16 shrink-0"></div> {/* Action space */}
</div> </div>
<div class="grid gap-2"> <div class="grid gap-2">
{/* Scope Level Items */} {/* Scope Level Items */}
<For each={props.items.filter(i => !i.subScopeId)}> <For each={props.items.filter(i => !i.subScopeId)}>
{(item) => ( {(item) => (
<LazyItem estimatedHeight={60}> <LazyItem estimatedHeight={60}>
<ItemRow <ItemRow
@@ -239,15 +239,16 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
/> />
</LazyItem> </LazyItem>
)} )}
</For> </For>
<Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
<div class="text-center py-8 text-muted-foreground/50 italic text-sm">
Empty scope. Drag items here or add sub-scopes.
</div> </div>
</Show>
</div>
</div> </div>
</div> </Show>
<Show when={scopeItems().length === 0 && props.subScopes.length === 0}>
<div class="text-center py-8 text-muted-foreground/50 italic text-sm">
Empty scope. Drag items here or add sub-scopes.
</div>
</Show>
{/* Sub-scopes */} {/* Sub-scopes */}
<div class="space-y-6 pt-4"> <div class="space-y-6 pt-4">
+21 -8
View File
@@ -164,12 +164,27 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
</div> </div>
<Show when={!isCollapsed()}> <Show when={!isCollapsed()}>
<div class="overflow-x-auto w-full pb-2 -mx-2 px-2"> <div
<div class="min-w-[768px]"> onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
<div class="p-2 space-y-1.5 relative"
onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }} >
class="p-2 space-y-1.5" {/* SubScope Column Headers */}
> <Show when={props.items.length > 0}>
<div class="sticky top-header z-20 bg-background/95 backdrop-blur-sm hidden md:flex items-center gap-4 text-[9px] font-bold text-muted-foreground/60 uppercase tracking-wider px-3 pb-2 pt-1 mb-2 border-b border-border/40">
<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">Price</div>
<div class="w-24 shrink-0 text-right">Subtotal</div>
<Show when={props.isSidebarCollapsed() || !props.hideColumns}>
<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 px-2">Total</div>
<div class="w-16 shrink-0"></div>
</div>
</Show>
<For each={props.items}> <For each={props.items}>
{(item) => ( {(item) => (
<LazyItem estimatedHeight={60}> <LazyItem estimatedHeight={60}>
@@ -194,8 +209,6 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
</div> </div>
</Show> </Show>
</div> </div>
</div>
</div>
</Show> </Show>
</div> </div>
); );
@@ -43,9 +43,8 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
{props.unassignedItems.length} Items Pending {props.unassignedItems.length} Items Pending
</span> </span>
</div> </div>
<div class="overflow-x-auto w-full pb-4 -mx-6 px-6"> <div class="relative pb-4">
<div class="min-w-[768px]"> {/* Sticky Column Headers for Unassigned */}
{/* 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="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="w-4 shrink-0"></div>
<div class="flex-1 min-w-[200px]">Description</div> <div class="flex-1 min-w-[200px]">Description</div>
@@ -80,8 +79,7 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
)} )}
</For> </For>
</div> </div>
</div> </div>
</div>
</div> </div>
</Show> </Show>
); );