refctor(ui): make tabs layout consistent with the rest of the app in settings and queue

src/routes/downloads/+page.svelte

@@ -42,9 +42,24 @@
   }
 </script>
 
-<div class="downloads-page">
+<div class="downloads-wrapper">
-  <div class="header">
+  <h2 style="padding: 8px">Downloads</h2>
-    <h2>Downloads</h2>
+
+  <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
@@ -58,7 +73,7 @@
             <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;">
+          <div class="sunken-panel table-container">
             <table class="interactive">
         <thead>
           <tr>
@@ -100,25 +115,59 @@
             </table>
           </div>
         {/if}
+      </div>
+    </div>
+  </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 {

src/routes/settings/+page.svelte

@@ -141,8 +141,10 @@
   }
 </script>
 
-<div style="padding: 8px;">
+<div class="settings-wrapper">
-  <h2>Settings</h2>
+  <h2 style="padding: 8px">Settings</h2>
+
+  <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.
@@ -163,10 +165,10 @@
       </li>
     </menu>
 
-  <div class="window" role="tabpanel">
+    <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">
@@ -366,12 +368,18 @@
       {/if}
       </div>
     </div>
+  </section>
 </div>
 
 <style>
+  .settings-wrapper {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
   h2 {
-    margin-top: 0;
+    margin: 0;
-    margin-bottom: 12px;
   }
 
   h3 {
@@ -380,12 +388,27 @@
     font-size: 1.1em;
   }
 
-  menu[role="tablist"] {
+  .settings-content {
-    margin-bottom: 0;
+    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 {