fix: increase NowPlayingBar height to 96px

- More bottom margin for controls row (padding 10px top, 14px bottom)
- Update all viewport height calculations to match

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 - 88px);  /* 88px = NowPlayingBar height */
+  height: calc(100vh - 96px);  /* 96px = NowPlayingBar height */
   overflow-y: auto;
   padding: 24px 32px;
 }

src/lib/components/NowPlayingBar.svelte

@@ -360,7 +360,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    height: 88px;
+    height: 96px;
     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 +445,7 @@
     flex: 1;
     display: flex;
     align-items: center;
-    padding: 8px 16px;
+    padding: 10px 16px 14px 16px;
     gap: 16px;
   }
 

src/lib/components/Sidebar.svelte

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

src/lib/components/lyrics/LyricsSidebar.svelte

@@ -67,7 +67,7 @@
   .lyrics-sidebar {
     width: 340px;
     min-width: 340px;
-    height: calc(100vh - 88px);
+    height: calc(100vh - 96px);
     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 - 88px);
+    height: calc(100vh - 96px);
     overflow: hidden;
   }
 
   .main-content {
     flex: 1;
     min-width: 0;
-    height: calc(100vh - 88px);
+    height: calc(100vh - 96px);
     overflow-y: auto;
     padding: 24px 32px;
   }