refactor(np): refactor layout

src/lib/components/NowPlayingPanel.svelte

@@ -41,6 +41,49 @@
 </script>
 
 <div class="now-playing">
+  <div class="player-main">
+    <div class="track-info">
+      <div class="track-title-row">
+        <img src="/icons/play.svg" alt="" class="track-icon" />
+        <div class="track-text-content">
+          <div class="track-title">
+            {#if hasTrack && $playback.currentTrack}
+              {$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
+            {:else}
+              No track playing
+            {/if}
+          </div>
+          <div class="track-artist">
+            {#if hasTrack && $playback.currentTrack}
+              {$playback.currentTrack.metadata.artist || 'Unknown Artist'}
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="player-controls-container">
+      <div class="progress-section">
+        <span class="time-display">{formatTime($playback.currentTime)}</span>
+        <div class="progress-bar-container">
+          <div class="progress-indicator">
+            <span class="progress-indicator-bar" style="width: {progressPercent}%;"></span>
+          </div>
+          <input
+            type="range"
+            min="0"
+            max={$playback.duration || 0}
+            step="0.1"
+            value={$playback.currentTime}
+            oninput={handleProgressChange}
+            disabled={!hasTrack}
+            class="progress-slider"
+          />
+        </div>
+        <span class="time-display">{formatTime($playback.duration)}</span>
+      </div>
+
+      <div class="controls-row">
         <div class="controls">
           <button
             class="control-button"
@@ -83,49 +126,12 @@
           </button>
         </div>
 
-  <div class="track-info">
-    <div class="track-title-row">
-      <img src="/icons/play.svg" alt="" class="track-icon" />
-      <div class="track-text-content">
-        <div class="track-title">
-          {#if hasTrack && $playback.currentTrack}
-            {$playback.currentTrack.metadata.title || $playback.currentTrack.filename}
-          {:else}
-            No track playing
-          {/if}
-        </div>
-        <div class="track-artist">
-          {#if hasTrack && $playback.currentTrack}
-            {$playback.currentTrack.metadata.artist || 'Unknown Artist'}
-          {/if}
-        </div>
-      </div>
-    </div>
-
-    <div class="progress-section">
-      <span class="time-display">{formatTime($playback.currentTime)}</span>
-      <div class="progress-bar-container">
-        <div class="progress-indicator">
-          <span class="progress-indicator-bar" style="width: {progressPercent}%;"></span>
-        </div>
-        <input
-          type="range"
-          min="0"
-          max={$playback.duration || 0}
-          step="0.1"
-          value={$playback.currentTime}
-          oninput={handleProgressChange}
-          disabled={!hasTrack}
-          class="progress-slider"
-        />
-      </div>
-      <span class="time-display">{formatTime($playback.duration)}</span>
-    </div>
-  </div>
-
         <div class="volume-section">
           <TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
         </div>
+      </div>
+    </div>
+  </div>
 
   <LyricsDisplay lrcPath={$playback.lrcPath} currentTime={$playback.currentTime} />
 </div>
@@ -133,7 +139,8 @@
 <style>
   .now-playing {
     display: flex;
-    align-items: center;
+    flex-direction: row;
+    justify-content: center;
     gap: 12px;
     padding: 8px;
     height: 100%;
@@ -141,6 +148,19 @@
     font-size: 11px;
   }
 
+  .player-main {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .controls-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
   .controls {
     display: flex;
     flex-shrink: 0;
@@ -177,12 +197,8 @@
   }
 
   .track-info {
-    flex: 1;
     min-width: 0;
     overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
   }
 
   .track-title-row {
@@ -224,6 +240,14 @@
     text-overflow: ellipsis;
   }
 
+  .player-controls-container {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-width: 400px;
+    width: 100%;
+  }
+
   .progress-section {
     display: flex;
     align-items: center;
@@ -269,17 +293,19 @@
     flex-shrink: 0;
   }
 
-  /* Responsive: hide lyrics on medium widths */
-  @media (max-width: 1000px) {
+  /* Responsive: hide lyrics panel when not enough space */
+  @media (max-width: 800px) {
     .now-playing :global(.lyrics-display) {
       display: none;
     }
+
+    .player-main {
+      width: 100%;
+      max-width: 600px;
     }
 
-  /* Responsive: hide volume on small widths */
-  @media (max-width: 800px) {
-    .volume-section {
-      display: none;
+    .player-controls-container {
+      max-width: none;
     }
   }