fixed visually

src/index.html

@@ -101,7 +101,10 @@
 
       <section class="track-info">
         <h2 id="station-name"></h2>
-        <p id="now-playing" class="hidden" aria-live="polite"></p>
+        <div id="now-playing" class="now-playing hidden" aria-live="polite">
+          <div id="now-artist" class="now-artist" aria-hidden="false"></div>
+          <div id="now-title" class="now-title" aria-hidden="false"></div>
+        </div>
         <p id="station-subtitle"></p>
         <div id="status-indicator" class="status-indicator-wrap" aria-hidden="true">
           <span class="status-dot"></span>

src/main.js

@@ -13,6 +13,8 @@ const audio = new Audio();
 const stationNameEl = document.getElementById('station-name');
 const stationSubtitleEl = document.getElementById('station-subtitle');
 const nowPlayingEl = document.getElementById('now-playing');
+const nowArtistEl = document.getElementById('now-artist');
+const nowTitleEl = document.getElementById('now-title');
 const statusTextEl = document.getElementById('status-text');
 const statusDotEl = document.querySelector('.status-dot');
 const playBtn = document.getElementById('play-btn');
@@ -215,12 +217,14 @@ function updateNowPlayingUI() {
   const station = stations[currentIndex];
   if (!station) return;
 
-  if (nowPlayingEl) {
+  if (nowPlayingEl && nowArtistEl && nowTitleEl) {
     if (station.currentSongInfo && station.currentSongInfo.artist && station.currentSongInfo.title) {
-      nowPlayingEl.textContent = `${station.currentSongInfo.artist} — ${station.currentSongInfo.title}`;
+      nowArtistEl.textContent = station.currentSongInfo.artist;
+      nowTitleEl.textContent = station.currentSongInfo.title;
       nowPlayingEl.classList.remove('hidden');
     } else {
-      nowPlayingEl.textContent = '';
+      nowArtistEl.textContent = '';
+      nowTitleEl.textContent = '';
       nowPlayingEl.classList.add('hidden');
     }
   }
@@ -419,10 +423,9 @@ function loadStation(index) {
   stationNameEl.textContent = station.name;
   stationSubtitleEl.textContent = currentMode === 'cast' ? `Casting to ${currentCastDevice}` : 'Live Stream';
   // clear now playing when loading a new station; will be updated by poller if available
-  if (nowPlayingEl) {
-    nowPlayingEl.textContent = '';
-    nowPlayingEl.classList.add('hidden');
-  }
+  if (nowPlayingEl) nowPlayingEl.classList.add('hidden');
+  if (nowArtistEl) nowArtistEl.textContent = '';
+  if (nowTitleEl) nowTitleEl.textContent = '';
 
   // Update Logo Text (First letter or number)
   // Simple heuristic: if name has a number, use it, else first letter

src/styles.css

@@ -398,6 +398,12 @@ body {
 .track-info {
     text-align: center;
     margin-bottom: 20px;
+    /* Reserve fixed space for station name, artist and title to avoid layout jumps */
+    min-height: 5.2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
 
 .track-info h2 {
@@ -407,11 +413,29 @@ body {
     text-shadow: 0 2px 4px rgba(0,0,0,0.2);
 }
 
-.now-playing {
+/* Now playing container: artist and title on separate lines */
+#now-playing {
     margin: 6px 0 0;
+    width: 100%;
+    /* Reserve two lines so content changes don't shift layout */
+    height: 2.6rem;
+    display: block;
+}
+
+#now-playing .now-artist,
+#now-playing .now-title {
     color: var(--text-main);
     font-size: 0.95rem;
     font-weight: 600;
+    line-height: 1.2rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* Hide visually but keep layout space */
+#now-playing.hidden {
+    visibility: hidden;
 }
 
 .track-info p {