mid layout change

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">