feat: dynamic lyrics layout reflow with content-based width measurement

Measure the widest lyrics line after render and constrain the lyrics
panel to that width. The outer justify-center then distributes surplus
space evenly on both sides, eliminating the asymmetric dead zone.

- Add _measureLyricsWidth() using max-content offsetWidth measurement
- Add ResizeObserver on lyrics-layout to re-measure on viewport resize
  (font uses clamp/2vw so line widths change with viewport)
- Reset _lyricsContentWidth when lyrics are cleared
- Remove w-full / max-w-5xl from inner container; bind width:100% only
  before measurement completes
- Switch lyrics wrapper from static flex-1 to conditional shrink class
  with explicit pixel width after measurement
- Add Playwright E2E tests covering Trail of Dead (short lines), Beck
  (long lines), Against Me! instrumental (no lyrics), viewport resize,
  and CSS class/style transitions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: pythoninthegrass

app/frontend/js/components/now-playing-view.js

@@ -10,6 +10,10 @@ export function createNowPlayingView(Alpine) {
     lyricsLoading: false,
     _lyricsTrackKey: null,
     _lyricsFetchId: 0,
+    _lyricsScrollTop: 0,
+    _lyricsCanScrollMore: false,
+    _lyricsContentWidth: null,
+    _lyricsLayoutObserver: null,
 
     // Virtual scroll state
     _rowHeight: 41,
@@ -41,6 +45,10 @@ export function createNowPlayingView(Alpine) {
         this._resizeObserver.disconnect();
         this._resizeObserver = null;
       }
+      if (this._lyricsLayoutObserver) {
+        this._lyricsLayoutObserver.disconnect();
+        this._lyricsLayoutObserver = null;
+      }
       if (this._rafId) {
         cancelAnimationFrame(this._rafId);
         this._rafId = null;
@@ -69,6 +77,7 @@ export function createNowPlayingView(Alpine) {
     async _fetchLyrics(track) {
       const fetchId = ++this._lyricsFetchId;
       this.lyrics = null;
+      this._lyricsContentWidth = null;
       this.lyricsLoading = true;
 
       try {
@@ -85,6 +94,7 @@ export function createNowPlayingView(Alpine) {
 
         if (result && result.plain_lyrics) {
           this.lyrics = result.plain_lyrics;
+          this.$nextTick(() => this._updateLyricsScrollState());
         } else {
           this.lyrics = null;
         }
@@ -99,6 +109,44 @@ export function createNowPlayingView(Alpine) {
       }
     },
 
+    _onLyricsScroll(event) {
+      const el = event.target;
+      this._lyricsScrollTop = el.scrollTop;
+      this._lyricsCanScrollMore = el.scrollTop + el.clientHeight < el.scrollHeight - 10;
+    },
+
+    _updateLyricsScrollState() {
+      const panel = this.$refs.lyricsPanel;
+      if (!panel) return;
+      panel.scrollTop = 0;
+      this._lyricsScrollTop = 0;
+      this._lyricsCanScrollMore = panel.scrollHeight > panel.clientHeight + 10;
+      this._measureLyricsWidth();
+      this._observeLyricsLayout();
+    },
+
+    _measureLyricsWidth() {
+      const panel = this.$refs.lyricsPanel;
+      if (!panel) return;
+      const p = panel.querySelector('[data-testid="lyrics-text"]');
+      if (!p) return;
+      const prev = p.style.width;
+      p.style.width = 'max-content';
+      // Add padding (pr-2 = 8px) to the measured text width
+      this._lyricsContentWidth = p.offsetWidth + 8;
+      p.style.width = prev;
+    },
+
+    _observeLyricsLayout() {
+      if (this._lyricsLayoutObserver) return;
+      const layout = this.$el.querySelector('[data-testid="lyrics-layout"]');
+      if (!layout) return;
+      this._lyricsLayoutObserver = new ResizeObserver(() => {
+        if (this.lyrics) this._measureLyricsWidth();
+      });
+      this._lyricsLayoutObserver.observe(layout);
+    },
+
     _onScroll() {
       if (this._rafId) return;
       this._rafId = requestAnimationFrame(() => {

app/frontend/styles.css

@@ -643,6 +643,14 @@ aside button:hover svg {
     overflow-x: clip;
   }
 
+  /* Hide scrollbar on lyrics panel — scroll indicators replace it */
+  .lyrics-hide-scrollbar {
+    scrollbar-width: none;
+  }
+  .lyrics-hide-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
   /* Disable header clicks during column resize */
   .resizing-columns > div {
     pointer-events: none;

app/frontend/tests/lyrics-layout.spec.js

@@ -0,0 +1,247 @@
+import { expect, test } from '@playwright/test';
+import { waitForAlpine } from './fixtures/helpers.js';
+import { createLibraryState, setupLibraryMocks } from './fixtures/mock-library.js';
+
+// Real lyrics from LRCLIB cache -- short lines, narrower content width
+const TRAIL_OF_DEAD_LYRICS =
+  `If i could make a list\nI'd put your name on top\nOf my mistakes and regrets\nAnd every line after it\nBecause every inch of hope\n\nBecomes a world of shame\nI've had to walk through\nEach and every day\n\nAt the top of my lungs\nIt would never return\nAnd if i screamed, "you were wrong"\nAll the faith that i've lost\n\nAnd there is nothing left to say\nThat has not been said\nIf i shout, you wouldn't listen\nI don't think it'd even sink in\nIf i could make a list\n\nOf my mistakes and regrets\nI'd put your name on top\nAnd every line after it\n\nBecomes a world of shame\nBecause every inch of hope\nI've had to walk through\nEach and every day\n\nAnd there is nothing left to say\nIf i shout, you wouldn't listen\nThat has not been said\n\nI don't think it'd even sink in\nIf you forget how to feel\nReach inside your chest\nIs there a heart beating?\nIs it just emptiness? (repeat)`;
+
+// Real lyrics from LRCLIB cache -- long lines, wider content width
+const BECK_LYRICS =
+  `In a cast iron cage you couldn't help but stare like a creature\nWith the laws of a brothel and the fireproof bones of a preacher\nAnd your lingo coined from the sacrament of a casino\nOn a government loan with a guillotine in your libido\n\nWho's gonna answer\nProfanity prayers\nWho's gonna answer\nThese profanity prayers\n\nWell you know how it looks when you pull all your books from the table\nAnd you stare into space trying to discern what to say now\nAnd you wait at the light and watch for a sign that you're breathing\n'Cause you can't just live on air and float to the ceiling\n\nWho's gonna answer\nProfanity prayers\nWho's gonna answer\nProfanity prayers\n\nWho's gonna answer\nProfanity prayers\nWho's gonna answer\nProfanity prayers`;
+
+const TRAIL_OF_DEAD_TRACK = {
+  id: 1,
+  title: 'Mistakes & Regrets',
+  artist: '...And You Will Know Us by the Trail of Dead',
+  album: 'Source Tags & Codes',
+  duration: 214000,
+  filepath: '/music/trail-of-dead/mistakes-and-regrets.mp3',
+};
+
+const BECK_TRACK = {
+  id: 2,
+  title: 'Profanity Prayers',
+  artist: 'Beck',
+  album: 'Modern Guilt',
+  duration: 209000,
+  filepath: '/music/beck/profanity-prayers.mp3',
+};
+
+const INSTRUMENTAL_TRACK = {
+  id: 3,
+  title: 'A Brief Yet Triumphant Intermission',
+  artist: 'Against Me!',
+  album: 'Searching for a Former Clarity',
+  duration: 47000,
+  filepath: '/music/against-me/a-brief-yet-triumphant-intermission.mp3',
+};
+
+/**
+ * Navigate to Now Playing view and wait for it
+ * @param {import('@playwright/test').Page} page
+ */
+async function navigateToNowPlaying(page) {
+  await page.evaluate(() => {
+    window.Alpine.store('ui').view = 'nowPlaying';
+  });
+  await page.waitForSelector('[x-data="nowPlayingView"]', { state: 'visible' });
+}
+
+/**
+ * Set current track and artwork on the player store
+ * @param {import('@playwright/test').Page} page
+ * @param {Object} track
+ */
+async function setCurrentTrack(page, track) {
+  await page.evaluate((trackData) => {
+    window.Alpine.store('player').currentTrack = trackData;
+    window.Alpine.store('player').artwork = {
+      data:
+        'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8DwHwAFBQIAX8jx0gAAAABJRU5ErkJggg==',
+      mime_type: 'image/png',
+      source: 'test',
+    };
+  }, track);
+}
+
+/**
+ * Inject lyrics directly into the nowPlayingView Alpine component and
+ * trigger the measurement pipeline.
+ * @param {import('@playwright/test').Page} page
+ * @param {string|null} lyricsText
+ */
+async function setLyrics(page, lyricsText) {
+  await page.evaluate((text) => {
+    const el = document.querySelector('[x-data="nowPlayingView"]');
+    const data = window.Alpine.$data(el);
+    data.lyrics = text;
+    if (text) {
+      data.$nextTick(() => data._updateLyricsScrollState());
+    } else {
+      data._lyricsContentWidth = null;
+    }
+  }, lyricsText);
+}
+
+/**
+ * Wait for _lyricsContentWidth to be set (non-null)
+ * @param {import('@playwright/test').Page} page
+ */
+async function waitForMeasurement(page) {
+  await page.waitForFunction(
+    () => {
+      const el = document.querySelector('[x-data="nowPlayingView"]');
+      return window.Alpine.$data(el)._lyricsContentWidth !== null;
+    },
+    null,
+    { timeout: 5000 },
+  );
+}
+
+/**
+ * Get the current _lyricsContentWidth value
+ * @param {import('@playwright/test').Page} page
+ * @returns {Promise<number|null>}
+ */
+async function getLyricsContentWidth(page) {
+  return await page.evaluate(() => {
+    const el = document.querySelector('[x-data="nowPlayingView"]');
+    return window.Alpine.$data(el)._lyricsContentWidth;
+  });
+}
+
+test.describe('Lyrics Layout Reflow', () => {
+  test.beforeEach(async ({ page }) => {
+    const libraryState = createLibraryState();
+    await setupLibraryMocks(page, libraryState);
+    await page.goto('/');
+    await waitForAlpine(page);
+    await page.waitForSelector('[x-data="libraryBrowser"]', { state: 'visible' });
+  });
+
+  test('short lyrics (Trail of Dead) should size wrapper to content width', async ({ page }) => {
+    await setCurrentTrack(page, TRAIL_OF_DEAD_TRACK);
+    await navigateToNowPlaying(page);
+
+    // Before lyrics: layout should not be visible
+    await expect(page.locator('[data-testid="lyrics-layout"]')).not.toBeVisible();
+
+    await setLyrics(page, TRAIL_OF_DEAD_LYRICS);
+    await expect(page.locator('[data-testid="lyrics-text"]')).toBeVisible();
+    await waitForMeasurement(page);
+
+    // Wrapper should have explicit pixel width
+    const lyricsWrapper = page.locator(
+      '[data-testid="lyrics-layout"] > div > div:nth-child(2)',
+    );
+    const style = await lyricsWrapper.getAttribute('style');
+    expect(style).toMatch(/width:\s*\d+(\.\d+)?px/);
+
+    const width = await getLyricsContentWidth(page);
+    expect(width).toBeGreaterThan(0);
+    expect(width).toBeLessThan(1624);
+  });
+
+  test('long lyrics (Beck) should produce wider content width than short lyrics', async ({ page }) => {
+    await setCurrentTrack(page, TRAIL_OF_DEAD_TRACK);
+    await navigateToNowPlaying(page);
+
+    // Measure short lyrics (Trail of Dead)
+    await setLyrics(page, TRAIL_OF_DEAD_LYRICS);
+    await waitForMeasurement(page);
+    const shortWidth = await getLyricsContentWidth(page);
+
+    // Switch to long lyrics (Beck)
+    await setCurrentTrack(page, BECK_TRACK);
+    await setLyrics(page, BECK_LYRICS);
+    await waitForMeasurement(page);
+    const longWidth = await getLyricsContentWidth(page);
+
+    // Beck's longer lines should produce a wider measurement
+    expect(longWidth).toBeGreaterThan(shortWidth);
+  });
+
+  test('instrumental track (no lyrics) should not set content width', async ({ page }) => {
+    await setCurrentTrack(page, INSTRUMENTAL_TRACK);
+    await navigateToNowPlaying(page);
+
+    // Simulate lyrics not found (null)
+    await setLyrics(page, null);
+
+    const width = await getLyricsContentWidth(page);
+    expect(width).toBeNull();
+
+    // Lyrics layout should not be visible
+    await expect(page.locator('[data-testid="lyrics-layout"]')).not.toBeVisible();
+  });
+
+  test('switching from lyrics to instrumental should reset layout', async ({ page }) => {
+    await setCurrentTrack(page, BECK_TRACK);
+    await navigateToNowPlaying(page);
+
+    // Show lyrics first
+    await setLyrics(page, BECK_LYRICS);
+    await waitForMeasurement(page);
+    const widthWithLyrics = await getLyricsContentWidth(page);
+    expect(widthWithLyrics).toBeGreaterThan(0);
+
+    // Switch to instrumental (lyrics not found)
+    await setCurrentTrack(page, INSTRUMENTAL_TRACK);
+    await setLyrics(page, null);
+
+    const widthAfterClear = await getLyricsContentWidth(page);
+    expect(widthAfterClear).toBeNull();
+  });
+
+  test('lyrics panel width should change on viewport resize', async ({ page }) => {
+    await setCurrentTrack(page, BECK_TRACK);
+    await navigateToNowPlaying(page);
+    await setLyrics(page, BECK_LYRICS);
+    await waitForMeasurement(page);
+
+    const initialWidth = await getLyricsContentWidth(page);
+
+    // Shrink viewport -- font uses clamp(1rem, 2vw, 1.5rem) so text width changes
+    await page.setViewportSize({ width: 900, height: 700 });
+
+    await page.waitForFunction(
+      (prev) => {
+        const el = document.querySelector('[x-data="nowPlayingView"]');
+        const current = window.Alpine.$data(el)._lyricsContentWidth;
+        return current !== null && current !== prev;
+      },
+      initialWidth,
+      { timeout: 5000 },
+    );
+
+    const newWidth = await getLyricsContentWidth(page);
+    expect(newWidth).not.toBe(initialWidth);
+    expect(newWidth).toBeGreaterThan(0);
+  });
+
+  test('inner container should drop width:100% after measurement', async ({ page }) => {
+    await setCurrentTrack(page, TRAIL_OF_DEAD_TRACK);
+    await navigateToNowPlaying(page);
+    await setLyrics(page, TRAIL_OF_DEAD_LYRICS);
+    await waitForMeasurement(page);
+
+    const innerContainer = page.locator('[data-testid="lyrics-layout"] > div');
+    const style = await innerContainer.getAttribute('style');
+    expect(style || '').not.toContain('width: 100%');
+  });
+
+  test('lyrics wrapper should use shrink class when measured', async ({ page }) => {
+    await setCurrentTrack(page, TRAIL_OF_DEAD_TRACK);
+    await navigateToNowPlaying(page);
+    await setLyrics(page, TRAIL_OF_DEAD_LYRICS);
+    await waitForMeasurement(page);
+
+    const lyricsWrapper = page.locator(
+      '[data-testid="lyrics-layout"] > div > div:nth-child(2)',
+    );
+    const classes = await lyricsWrapper.getAttribute('class');
+    expect(classes).toContain('shrink');
+    expect(classes).not.toContain('flex-1');
+  });
+});