From b52564d44dd1c8fac277901acab2ce0d8e0074f8 Mon Sep 17 00:00:00 2001
From: Timothy Cardoza <tcardoza@cardoza.construction>
Date: Fri, 13 Mar 2026 18:41:44 -0500
Subject: [PATCH] mid layout change

---
 src/components/EstimateBuilder.tsx            | 14 ++++-
 .../estimate-builder/BuilderSidebar.tsx       | 63 ++++++++-----------
 2 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/components/EstimateBuilder.tsx b/src/components/EstimateBuilder.tsx
index f2f24c9..83507c3 100644
--- a/src/components/EstimateBuilder.tsx
+++ b/src/components/EstimateBuilder.tsx
@@ -208,8 +208,16 @@ const EstimateBuilder: Component<EstimateBuilderProps> = (props) => {
                     onSaveChanges={() => appStore.isLatestVersion() ? saveChangesToCloud() : saveAsNewestToCloud()}
                 />
 
-                <div class="flex flex-1 relative items-start">
-                    <BuilderSidebar 
+                <div
+                    style={{
+                        display: 'grid',
+                        'grid-template-columns': isSidebarCollapsed() ? '0px 1fr' : '18rem 1fr',
+                        transition: 'grid-template-columns 500ms ease',
+                        'align-items': 'start',
+                        flex: '1',
+                    }}
+                >
+                    <BuilderSidebar
                         isCollapsed={isSidebarCollapsed()}
                         unassignedItems={unassignedItems()}
                         grandTotals={grandTotals()}
@@ -219,7 +227,7 @@ const EstimateBuilder: Component<EstimateBuilderProps> = (props) => {
                         onAddScope={addScope}
                     />
 
-                    <main onClick={clearSelection} class="flex-1 min-w-0 p-4 md:p-8 bg-zinc-50/50 space-y-8 min-h-screen">
+                    <main onClick={clearSelection} class="min-w-0 p-4 md:p-8 bg-zinc-50/50 space-y-8 min-h-screen">
                         <ProjectDetailsForm />
 
                         <div class="bg-muted/30 border border-border rounded-3xl p-6 mb-8">
diff --git a/src/components/estimate-builder/BuilderSidebar.tsx b/src/components/estimate-builder/BuilderSidebar.tsx
index a630afb..4f621c8 100644
--- a/src/components/estimate-builder/BuilderSidebar.tsx
+++ b/src/components/estimate-builder/BuilderSidebar.tsx
@@ -22,14 +22,20 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
     };
 
     return (
+        /*
+         * The sidebar sits inside a CSS grid column (in EstimateBuilder.tsx).
+         * It fills its column completely. When the column width transitions to 0,
+         * the sidebar content is clipped by overflow-hidden on this element.
+         * This means the main content genuinely reclaims the space.
+         */
         <aside
-            class={`h-[calc(100vh-var(--spacing-header))] sticky top-header bg-background border-r border-border flex flex-col transition-all duration-500 ease-in-out relative group/sidebar
-            ${props.isCollapsed ? 'w-0 opacity-0 -translate-x-full overflow-hidden' : 'w-72 opacity-100'}`}
+            class="h-[calc(100vh-var(--spacing-header))] sticky top-[var(--spacing-header)] bg-background border-r border-border flex flex-col overflow-hidden"
+            style={{ "min-width": 0 }}
         >
-            <div class="flex-1 overflow-y-auto px-4 py-8">
+            <div class="flex-1 overflow-y-auto overflow-x-hidden px-4 py-8 w-72">
                 <div class="mb-4">
                     <div class="flex items-center justify-between mb-4 px-2">
-                        <span class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em]">Estimate Navigator</span>
+                        <span class="text-[10px] font-black text-muted-foreground uppercase tracking-[0.2em] whitespace-nowrap">Estimate Navigator</span>
                         <button
                             onClick={props.onAddScope}
                             class="p-1.5 bg-muted hover:bg-primary/10 text-muted-foreground hover:text-primary rounded-lg transition-all"
@@ -53,18 +59,15 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
                                     const headerOffset = 180;
                                     const elementPosition = el.getBoundingClientRect().top;
                                     const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-                                    window.scrollTo({
-                                        top: offsetPosition,
-                                        behavior: 'smooth'
-                                    });
+                                    window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
                                 }
                             }}
-                            class={`group flex items-center justify-between px-3 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all cursor-pointer border-2 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium-lg shadow-primary/10 text-primary' : (props.unassignedItems.length > 0 ? 'bg-muted/30 text-foreground border-border/50 hover:bg-muted/50' : 'text-muted-foreground border-transparent hover:bg-accent')}`}
+                            class={`group flex items-center justify-between px-3 py-3 rounded-xl text-xs font-black uppercase tracking-wider transition-all cursor-pointer border-2 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium text-primary' : (props.unassignedItems.length > 0 ? 'bg-muted/30 text-foreground border-border/50 hover:bg-muted/50' : 'text-muted-foreground border-transparent hover:bg-accent')}`}
                         >
-                            <span class="flex items-center gap-2">
-                                <ListTree class="w-4 h-4" /> Unassigned
+                            <span class="flex items-center gap-2 whitespace-nowrap">
+                                <ListTree class="w-4 h-4 shrink-0" /> Unassigned
                             </span>
-                            <span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors ${props.hoveredScopeId === 'unassigned' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-primary border-border'}`}>
+                            <span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors shrink-0 ${props.hoveredScopeId === 'unassigned' ? 'bg-primary text-primary-foreground border-primary' : 'bg-background text-primary border-border'}`}>
                                 {props.unassignedItems.length}
                             </span>
                         </div>
@@ -76,28 +79,22 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
                             {(scope) => (
                                 <div class="space-y-1">
                                     <div
-                                        onDragOver={(e) => {
-                                            e.preventDefault();
-                                            props.setHoveredScopeId(scope.id);
-                                        }}
+                                        onDragOver={(e) => { e.preventDefault(); props.setHoveredScopeId(scope.id); }}
                                         onDragLeave={() => props.setHoveredScopeId(null)}
                                         onDrop={(e) => props.onDrop(e, scope.id)}
-                                        class={`group flex items-center justify-between px-4 py-3 rounded-xl text-sm font-bold transition-all cursor-pointer border-2 ${props.hoveredScopeId === scope.id ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium-lg shadow-primary/10 text-primary-foreground' : 'text-muted-foreground border-transparent hover:bg-card hover:shadow-premium hover:border-border'}`}
+                                        class={`group flex items-center justify-between px-4 py-3 rounded-xl text-sm font-bold transition-all cursor-pointer border-2 ${props.hoveredScopeId === scope.id ? 'bg-primary/10 border-primary scale-[1.02] shadow-premium text-primary' : 'text-muted-foreground border-transparent hover:bg-card hover:shadow-premium hover:border-border'}`}
                                         onClick={() => {
                                             const el = document.getElementById(`scope-${scope.id}`);
                                             if (el) {
                                                 const headerOffset = 180;
                                                 const elementPosition = el.getBoundingClientRect().top;
                                                 const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-                                                window.scrollTo({
-                                                    top: offsetPosition,
-                                                    behavior: 'smooth'
-                                                });
+                                                window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
                                             }
                                         }}
                                     >
                                         <span class="truncate pr-2">{scope.name}</span>
-                                        <div class="flex items-center gap-2">
+                                        <div class="flex items-center gap-2 shrink-0">
                                             <span class={`px-2 py-0.5 rounded-lg text-[10px] font-black border transition-colors ${props.hoveredScopeId === scope.id ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted text-muted-foreground border-border'}`}>
                                                 {items.filter(i => i.scopeId === scope.id).length}
                                             </span>
@@ -110,16 +107,9 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
                                         <For each={subScopes.filter(ss => ss.scopeId === scope.id)}>
                                             {(subScope) => (
                                                 <div
-                                                    onDragOver={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        props.setHoveredScopeId(subScope.id);
-                                                    }}
+                                                    onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); props.setHoveredScopeId(subScope.id); }}
                                                     onDragLeave={() => props.setHoveredScopeId(null)}
-                                                    onDrop={(e) => {
-                                                        e.stopPropagation();
-                                                        props.onDrop(e, scope.id, subScope.id);
-                                                    }}
+                                                    onDrop={(e) => { e.stopPropagation(); props.onDrop(e, scope.id, subScope.id); }}
                                                     onClick={(e) => {
                                                         e.stopPropagation();
                                                         const el = document.getElementById(`subscope-${subScope.id}`);
@@ -127,16 +117,13 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
                                                             const headerOffset = 180;
                                                             const elementPosition = el.getBoundingClientRect().top;
                                                             const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
-                                                            window.scrollTo({
-                                                                top: offsetPosition,
-                                                                behavior: 'smooth'
-                                                            });
+                                                            window.scrollTo({ top: offsetPosition, behavior: 'smooth' });
                                                         }
                                                     }}
                                                     class={`flex items-center justify-between px-3 py-1.5 rounded-lg text-[11px] font-black uppercase tracking-wider transition-all cursor-pointer border ${props.hoveredScopeId === subScope.id ? 'bg-primary/5 border-primary/30 text-primary scale-[1.02]' : 'text-muted-foreground/60 border-transparent hover:bg-muted hover:text-foreground'}`}
                                                 >
                                                     <span class="truncate">{subScope.name}</span>
-                                                    <span class="text-[10px] opacity-60 font-medium">
+                                                    <span class="text-[10px] opacity-60 font-medium shrink-0">
                                                         {items.filter(i => i.subScopeId === subScope.id).length}
                                                     </span>
                                                 </div>
@@ -150,9 +137,9 @@ export const BuilderSidebar: Component<BuilderSidebarProps> = (props) => {
                 </div>
 
                 {/* Sidebar Footer */}
-                <div class="p-4 border-t border-border bg-muted/30">
+                <div class="p-4 border-t border-border bg-muted/30 rounded-2xl mt-4">
                     <div class="bg-card rounded-2xl p-4 border border-border shadow-sm">
-                        <div class="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1">Current Total</div>
+                        <div class="text-[10px] font-black text-muted-foreground uppercase tracking-widest mb-1 whitespace-nowrap">Current Total</div>
                         <div class="text-xl font-black text-foreground">${formatNumber(props.grandTotals.grandTotal)}</div>
                     </div>
                 </div>