fix: add proper bottom margin to NowPlayingBar

- Increase height to 104px (+8px)
- Increase bottom padding to 26px
- Remove divider separators
- Update all viewport height calculations

CLAUDE.md

@@ -19,7 +19,7 @@ The `.main-content` container in `src/routes/+page.svelte` must NOT have `displa
 .main-content {
   flex: 1;
   min-width: 0;
-  height: calc(100vh - 96px);  /* 96px = NowPlayingBar height */
+  height: calc(100vh - 104px);  /* 104px = NowPlayingBar height */
   overflow-y: auto;
   padding: 24px 32px;
 }

src/lib/components/NowPlayingBar.svelte

@@ -216,8 +216,6 @@
         {/if}
       </button>
 
-      <div class="divider"></div>
-
       <button class="control-btn" title="Add to Playlist">
         <Plus size={16} />
       </button>
@@ -316,8 +314,6 @@
         <Maximize2 size={16} />
       </button>
 
-      <div class="divider"></div>
-
       <!-- Volume Control -->
       <div class="volume-control">
         <button
@@ -360,7 +356,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    height: 96px;
+    height: 104px;
     background: linear-gradient(to top, rgba(18, 18, 20, 0.98) 0%, rgba(24, 24, 28, 0.95) 100%);
     backdrop-filter: blur(20px);
     border-top: 1px solid rgba(255, 255, 255, 0.06);
@@ -445,7 +441,7 @@
     flex: 1;
     display: flex;
     align-items: center;
-    padding: 6px 16px 18px 16px;
+    padding: 6px 16px 26px 16px;
     gap: 16px;
   }
 
@@ -472,13 +468,6 @@
     min-width: 0;
   }
 
-  .divider {
-    width: 1px;
-    height: 20px;
-    background: rgba(255, 255, 255, 0.1);
-    margin: 0 8px;
-  }
-
   /* ===== Control Buttons ===== */
   .control-btn {
     display: flex;

src/lib/components/Sidebar.svelte

@@ -195,7 +195,7 @@
     background-color: var(--bg-secondary);
     display: flex;
     flex-direction: column;
-    height: calc(100vh - 96px);
+    height: calc(100vh - 104px);
   }
 
   .content {

src/lib/components/lyrics/LyricsSidebar.svelte

@@ -67,7 +67,7 @@
   .lyrics-sidebar {
     width: 340px;
     min-width: 340px;
-    height: calc(100vh - 96px);
+    height: calc(100vh - 104px);
     display: flex;
     flex-direction: column;
     border-left: 1px solid var(--bg-tertiary);

src/routes/+page.svelte

@@ -1289,14 +1289,14 @@
     display: flex;
     flex: 1;
     min-width: 0;
-    height: calc(100vh - 96px);
+    height: calc(100vh - 104px);
     overflow: hidden;
   }
 
   .main-content {
     flex: 1;
     min-width: 0;
-    height: calc(100vh - 96px);
+    height: calc(100vh - 104px);
     overflow-y: auto;
     padding: 24px 32px;
   }