From 3118d969c61da07094aa43c3a7f17867f8ea3714 Mon Sep 17 00:00:00 2001
From: Markury <mr.catborg@gmail.com>
Date: Sun, 5 Oct 2025 01:40:14 -0400
Subject: [PATCH] refctor(ui): make tabs layout consistent with the rest of the
 app in settings and queue

---
 src/routes/downloads/+page.svelte | 120 ++++++++++++++++++++++--------
 src/routes/settings/+page.svelte  |  87 ++++++++++++++--------
 2 files changed, 145 insertions(+), 62 deletions(-)

diff --git a/src/routes/downloads/+page.svelte b/src/routes/downloads/+page.svelte
index f8af7a6..d3937dd 100644
--- a/src/routes/downloads/+page.svelte
+++ b/src/routes/downloads/+page.svelte
@@ -42,24 +42,39 @@
   }
 </script>
 
-<div class="downloads-page">
-  <div class="header">
-    <h2>Downloads</h2>
-    <div class="header-actions">
-      <button onclick={handleClearCompleted} disabled={queueItems.every(i => i.status !== 'completed')}>
-        Clear Completed
-      </button>
-    </div>
-  </div>
+<div class="downloads-wrapper">
+  <h2 style="padding: 8px">Downloads</h2>
 
-  {#if queueItems.length === 0}
-    <div class="empty-state">
-      <p>No downloads in queue</p>
-      <p class="help-text">Add tracks, albums, or playlists from services to start downloading</p>
-    </div>
-  {:else}
-    <div class="sunken-panel" style="overflow: auto; flex: 1;">
-      <table class="interactive">
+  <section class="downloads-content">
+    <!--
+      svelte-ignore a11y_no_noninteractive_element_to_interactive_role
+      Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
+    -->
+    <menu role="tablist">
+      <li role="tab" aria-selected={true}>
+        <button>Queue</button>
+      </li>
+    </menu>
+
+    <div class="window tab-content" role="tabpanel">
+      <div class="window-body">
+        <div class="tab-header">
+          <h4>{queueItems.length} item{queueItems.length !== 1 ? 's' : ''} in queue</h4>
+          <div class="header-actions">
+            <button onclick={handleClearCompleted} disabled={queueItems.every(i => i.status !== 'completed')}>
+              Clear Completed
+            </button>
+          </div>
+        </div>
+
+        {#if queueItems.length === 0}
+          <div class="empty-state">
+            <p>No downloads in queue</p>
+            <p class="help-text">Add tracks, albums, or playlists from services to start downloading</p>
+          </div>
+        {:else}
+          <div class="sunken-panel table-container">
+            <table class="interactive">
         <thead>
           <tr>
             <th class="col-title">Title</th>
@@ -97,28 +112,62 @@
             </tr>
           {/each}
         </tbody>
-      </table>
+            </table>
+          </div>
+        {/if}
+      </div>
     </div>
-  {/if}
+  </section>
 </div>
 
 <style>
-  .downloads-page {
+  .downloads-wrapper {
+    height: 100%;
     display: flex;
     flex-direction: column;
-    padding: 8px;
-  }
-
-  .header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
   }
 
   h2 {
     margin: 0;
-    font-size: 1.4em;
+  }
+
+  .downloads-content {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-content {
+    margin-top: -2px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-content .window-body {
+    padding: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px;
+    border-bottom: 1px solid var(--button-shadow, #808080);
+    flex-shrink: 0;
+  }
+
+  .tab-header h4 {
+    margin: 0;
+    font-size: 1em;
+    font-weight: normal;
   }
 
   .header-actions {
@@ -126,13 +175,21 @@
     gap: 8px;
   }
 
+  .table-container {
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
   .empty-state {
+    padding: 32px 16px;
+    text-align: center;
+    opacity: 0.6;
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    color: light-dark(#666, #999);
   }
 
   .empty-state p {
@@ -155,6 +212,9 @@
 
   .col-title {
     width: auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   .col-artist {
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 331ed87..0a25ed7 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -141,32 +141,34 @@
   }
 </script>
 
-<div style="padding: 8px;">
-  <h2>Settings</h2>
-  <!--
-        svelte-ignore a11y_no_noninteractive_element_to_interactive_role
-        Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
-        The role="tablist" selector is used by 98.css CSS rules (menu[role="tablist"]).
-        The <menu> element IS interactive (contains clickable <button> elements) and the
-        role="tablist" properly describes the semantic purpose to assistive technology.
-        This is the documented pattern from 98.css and matches WAI-ARIA tab widget patterns.
-  -->
-  <menu role="tablist">
-    <li role="tab" aria-selected={activeTab === 'library'}>
-      <a href="#library" onclick={(e) => { e.preventDefault(); activeTab = 'library'; }}>Library</a>
-    </li>
-    <li role="tab" aria-selected={activeTab === 'deezer'}>
-      <a href="#deezer" onclick={(e) => { e.preventDefault(); activeTab = 'deezer'; }}>Deezer</a>
-    </li>
-    <li role="tab" aria-selected={activeTab === 'advanced'}>
-      <a href="#advanced" onclick={(e) => { e.preventDefault(); activeTab = 'advanced'; }}>Advanced</a>
-    </li>
-  </menu>
+<div class="settings-wrapper">
+  <h2 style="padding: 8px">Settings</h2>
 
-  <div class="window" role="tabpanel">
-    <div class="window-body">
+  <section class="settings-content">
+    <!--
+          svelte-ignore a11y_no_noninteractive_element_to_interactive_role
+          Reason: 98.css library requires <menu role="tablist"> for proper tab styling.
+          The role="tablist" selector is used by 98.css CSS rules (menu[role="tablist"]).
+          The <menu> element IS interactive (contains clickable <button> elements) and the
+          role="tablist" properly describes the semantic purpose to assistive technology.
+          This is the documented pattern from 98.css and matches WAI-ARIA tab widget patterns.
+    -->
+    <menu role="tablist">
+      <li role="tab" aria-selected={activeTab === 'library'}>
+        <a href="#library" onclick={(e) => { e.preventDefault(); activeTab = 'library'; }}>Library</a>
+      </li>
+      <li role="tab" aria-selected={activeTab === 'deezer'}>
+        <a href="#deezer" onclick={(e) => { e.preventDefault(); activeTab = 'deezer'; }}>Deezer</a>
+      </li>
+      <li role="tab" aria-selected={activeTab === 'advanced'}>
+        <a href="#advanced" onclick={(e) => { e.preventDefault(); activeTab = 'advanced'; }}>Advanced</a>
+      </li>
+    </menu>
+
+    <div class="window tab-content" role="tabpanel">
+      <div class="window-body">
       {#if activeTab === 'library'}
-        <section class="tab-content">
+        <section>
           <h3>Library Folders</h3>
           <div class="field-row-stacked">
             <label for="music-folder">Music Folder</label>
@@ -214,7 +216,7 @@
           </div>
         </section>
       {:else if activeTab === 'deezer'}
-        <section class="tab-content">
+        <section>
           <h3>Deezer Download Settings</h3>
 
           <div class="field-row-stacked">
@@ -336,7 +338,7 @@
           </fieldset>
         </section>
       {:else if activeTab === 'advanced'}
-        <section class="tab-content">
+        <section>
           <h3>Advanced Settings</h3>
 
           <div class="field-row-stacked">
@@ -364,14 +366,20 @@
           </div>
         </section>
       {/if}
+      </div>
     </div>
-  </div>
+  </section>
 </div>
 
 <style>
+  .settings-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
   h2 {
-    margin-top: 0;
-    margin-bottom: 12px;
+    margin: 0;
   }
 
   h3 {
@@ -380,12 +388,27 @@
     font-size: 1.1em;
   }
 
-  menu[role="tablist"] {
-    margin-bottom: 0;
+  .settings-content {
+    margin: 0;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
   }
 
   .tab-content {
-    margin: 0;
+    margin-top: -2px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .tab-content .window-body {
+    padding: 12px;
+    flex: 1;
+    overflow-y: auto;
+    min-height: 0;
   }
 
   .info-note {