feat: vaste kolomheaders

webui/html/base.css

@@ -105,11 +105,27 @@ h1 {
 .pane-content {
   flex: 1 1 auto;
   min-height: 0;
-  overflow-y: auto;
   border-top: 1px solid var(--color-border);
   padding-top: 5px;
   position: relative;
   background: var(--color-surface);
+  display: flex;
+  flex-direction: column;
+}
+
+.pane-list-header {
+  flex: 0 0 auto;
+  position: relative;
+  z-index: 2;
+  background: var(--color-surface);
+}
+
+.pane-list-scroll {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  position: relative;
+  z-index: 1;
 }
 
 .pane-focus-line {
@@ -250,11 +266,6 @@ button:disabled {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  isolation: isolate;
-  background-clip: padding-box;
   box-shadow:
     0 1px 0 rgba(0, 0, 0, 0.04),
     0 8px 10px -10px rgba(0, 0, 0, 0.45);

webui/html/index.html

@@ -38,12 +38,16 @@
         </div>
 
         <div class="pane-content">
-          <div class="list-grid-header">
-            <span class="col-name">Name</span>
-            <span class="col-size">Size</span>
-            <span class="col-modified">Modified</span>
+          <div class="pane-list-header">
+            <div class="list-grid-header">
+              <span class="col-name">Name</span>
+              <span class="col-size">Size</span>
+              <span class="col-modified">Modified</span>
+            </div>
+          </div>
+          <div class="pane-list-scroll">
+            <ul id="left-items" class="list"></ul>
           </div>
-          <ul id="left-items" class="list"></ul>
         </div>
         <div id="left-focus-line" class="pane-focus-line" aria-live="polite">—</div>
       </section>
@@ -58,12 +62,16 @@
         </div>
 
         <div class="pane-content">
-          <div class="list-grid-header">
-            <span class="col-name">Name</span>
-            <span class="col-size">Size</span>
-            <span class="col-modified">Modified</span>
+          <div class="pane-list-header">
+            <div class="list-grid-header">
+              <span class="col-name">Name</span>
+              <span class="col-size">Size</span>
+              <span class="col-modified">Modified</span>
+            </div>
+          </div>
+          <div class="pane-list-scroll">
+            <ul id="right-items" class="list"></ul>
           </div>
-          <ul id="right-items" class="list"></ul>
         </div>
         <div id="right-focus-line" class="pane-focus-line" aria-live="polite">—</div>
       </section>