From a07b145c7652e5a064fcb8225ccdd4ccfe253c44 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Wed, 11 Mar 2026 15:03:59 -0500
Subject: [PATCH] header fix

---
 src/components/ScopeCard.tsx                  | 25 ++++++++--------
 src/components/SubScopeCard.tsx               | 29 ++++++++++++++-----
 .../UnassignedItemsSection.tsx                |  8 ++---
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/src/components/ScopeCard.tsx b/src/components/ScopeCard.tsx
index fbf4fca..4b888fa 100644
--- a/src/components/ScopeCard.tsx
+++ b/src/components/ScopeCard.tsx
@@ -203,8 +203,8 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                     onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
                     class="p-6 space-y-4 relative"
                 >
-                    <div class="overflow-x-auto w-full pb-4 -mx-6 px-6">
-                        <div class="min-w-[768px]">
+                    <Show when={scopeItems().length > 0}>
+                        <div class="relative pb-4">
                             {/* 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="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>
 
-                    <div class="grid gap-2">
-                        {/* Scope Level Items */}
-                        <For each={props.items.filter(i => !i.subScopeId)}>
+                            <div class="grid gap-2">
+                                {/* Scope Level Items */}
+                                <For each={props.items.filter(i => !i.subScopeId)}>
                             {(item) => (
                                 <LazyItem estimatedHeight={60}>
                                     <ItemRow
@@ -239,15 +239,16 @@ const ScopeCard: Component<ScopeCardProps> = (props) => {
                                     />
                                 </LazyItem>
                             )}
-                        </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.
+                                </For>
                             </div>
-                        </Show>
-                    </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 */}
                     <div class="space-y-6 pt-4">
diff --git a/src/components/SubScopeCard.tsx b/src/components/SubScopeCard.tsx
index 43a52e6..9842870 100644
--- a/src/components/SubScopeCard.tsx
+++ b/src/components/SubScopeCard.tsx
@@ -164,12 +164,27 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
             </div>
 
             <Show when={!isCollapsed()}>
-                <div class="overflow-x-auto w-full pb-2 -mx-2 px-2">
-                    <div class="min-w-[768px]">
-                        <div
-                            onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
-                            class="p-2 space-y-1.5"
-                        >
+                <div
+                    onClick={(e) => { if (e.target === e.currentTarget) props.onClearSelection(); }}
+                    class="p-2 space-y-1.5 relative"
+                >
+                    {/* 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}>
                         {(item) => (
                             <LazyItem estimatedHeight={60}>
@@ -194,8 +209,6 @@ const SubScopeCard: Component<SubScopeCardProps> = (props) => {
                         </div>
                     </Show>
                 </div>
-                    </div>
-                </div>
             </Show>
         </div>
     );
diff --git a/src/components/estimate-builder/UnassignedItemsSection.tsx b/src/components/estimate-builder/UnassignedItemsSection.tsx
index 4180580..475cd86 100644
--- a/src/components/estimate-builder/UnassignedItemsSection.tsx
+++ b/src/components/estimate-builder/UnassignedItemsSection.tsx
@@ -43,9 +43,8 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
                         {props.unassignedItems.length} Items Pending
                     </span>
                 </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="relative pb-4">
+                    {/* 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>
@@ -80,8 +79,7 @@ export const UnassignedItemsSection: Component<UnassignedItemsSectionProps> = (p
                         )}
                     </For>
                 </div>
-                    </div>
-                </div>
+            </div>
             </div>
         </Show>
     );