style: fixed pane with scrollable session tabs

Author: brucehsu

apps/desktop/src/App.module.css

@@ -2,8 +2,10 @@
   --sidebar-width: 360px;
   display: grid;
   grid-template-columns: clamp(320px, var(--sidebar-width), 80%) 1fr;
+  grid-template-rows: minmax(0, 1fr);
   height: 100vh;
   position: relative;
+  overflow: hidden;
 }
 
 .bootScreen {
@@ -19,7 +21,9 @@
   position: relative;
   min-width: 0;
   height: 100%;
+  min-height: 0;
   display: flex;
+  overflow: hidden;
 }
 
 .sidebarResizeHandle {

apps/desktop/src/components/MainPane/MainPane.module.css

@@ -3,6 +3,8 @@
   flex-direction: column;
   gap: 12px;
   padding: 24px;
+  height: 100%;
+  min-height: 0;
   overflow: hidden;
   position: relative;
   background: var(--bg);
@@ -47,6 +49,7 @@
   display: flex;
   flex-direction: column;
   flex: 1;
+  min-height: 0;
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 16px;
@@ -67,6 +70,7 @@
 
 .tabBody {
   flex: 1;
+  min-height: 0;
   position: relative;
 }
 

apps/desktop/src/components/Sidebar/Sidebar.module.css

@@ -1,7 +1,8 @@
 .sidebar {
   background: var(--surface);
   border-right: 1px solid var(--border);
-  padding: 24px 18px;
+  --sidebar-edge-inset: 16px;
+  padding: 0 18px;
   display: flex;
   flex-direction: column;
   gap: 18px;
@@ -17,6 +18,10 @@
   display: flex;
   flex-direction: column;
   gap: 10px;
+  flex-shrink: 0;
+  margin: 0 -18px;
+  padding: var(--sidebar-edge-inset) 18px 12px;
+  border-bottom: 1px solid var(--border);
 }
 
 .searchField {
@@ -59,6 +64,8 @@
   flex-direction: column;
   gap: 8px;
   overflow-y: auto;
+  min-height: 0;
+  overscroll-behavior: contain;
   padding-right: 4px;
   flex: 1;
 }
@@ -177,6 +184,10 @@
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
+  flex-shrink: 0;
+  margin: 0 -18px;
+  padding: 12px 18px var(--sidebar-edge-inset);
+  border-top: 1px solid var(--border);
 }
 
 .actionButton {