Refine task directory layout

index.html

@@ -34,18 +34,14 @@
           <p>PromptDialog task demos.</p>
         </div>
 
-        <div class="demo-layout">
-          <div class="demo-main">
-            <div class="task-list" id="task-list" aria-live="polite">
-              <div class="task-card">
-                <p class="loading">Loading audio demos...</p>
-              </div>
-            </div>
-          </div>
+        <nav class="task-directory" id="task-directory" aria-label="Audio demo tasks">
+          <p class="loading">Loading task directory...</p>
+        </nav>
 
-          <nav class="task-directory" id="task-directory" aria-label="Audio demo tasks">
-            <p class="loading">Loading task directory...</p>
-          </nav>
+        <div class="task-list" id="task-list" aria-live="polite">
+          <div class="task-card">
+            <p class="loading">Loading audio demos...</p>
+          </div>
         </div>
       </div>
     </section>

static/css/index.css

@@ -101,28 +101,18 @@ body {
   line-height: 1.55;
 }
 
-.demo-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 17rem;
-  gap: 1.5rem;
-  align-items: start;
-}
-
-.demo-main {
-  min-width: 0;
-}
-
 .task-directory {
   display: grid;
-  grid-template-columns: 8rem minmax(0, 1fr);
-  gap: 0.9rem;
-  align-items: start;
+  gap: 0.65rem;
+  width: 15rem;
   margin: 0;
   border: 1px solid var(--line);
   background: var(--soft);
   padding: 0.9rem;
-  position: sticky;
-  top: 1rem;
+  position: fixed;
+  top: 8.5rem;
+  right: max(1rem, calc((100vw - 1640px) / 2 + 1rem));
+  z-index: 20;
 }
 
 .task-directory-title {
@@ -317,13 +307,10 @@ audio {
     width: min(100% - 1rem, 1640px);
   }
 
-  .demo-layout {
-    grid-template-columns: 1fr;
-  }
-
   .task-directory {
-    grid-template-columns: 1fr;
     position: static;
+    width: auto;
+    margin: 0 0 1.25rem;
   }
 
   .audio-grid {