fix(ui): stop the 'Video speed' label wrapping in the Output panel
Widen the panel (280->300px), keep control labels on one line (white-space: nowrap), and let the range shrink (min-width:0) instead of pushing the label to a second row. +1 e2e (panel-layout.spec.ts). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,25 @@
|
||||
import { test, expect, Page } from "@playwright/test";
|
||||
|
||||
// Guard: the "Video speed" control label must stay on ONE line in the Output panel
|
||||
// (it was wrapping to two rows at the old panel width).
|
||||
|
||||
async function enter(page: Page) {
|
||||
await page.goto("/");
|
||||
await page.waitForFunction(() => (window as any).__hefReady === true, null, { timeout: 45_000 });
|
||||
await page.locator("#welcome-launch").click();
|
||||
await page.waitForSelector("#welcome", { state: "detached", timeout: 10_000 });
|
||||
}
|
||||
|
||||
test('the "Video speed" label does not wrap to a second line', async ({ page }) => {
|
||||
await enter(page);
|
||||
const info = await page.evaluate(() => {
|
||||
const span = document.querySelector('.panel .play-speed span[data-i18n="speed.label"]') as HTMLElement;
|
||||
const cs = getComputedStyle(span);
|
||||
let lh = parseFloat(cs.lineHeight);
|
||||
if (Number.isNaN(lh)) lh = parseFloat(cs.fontSize) * 1.3; // "normal"
|
||||
return { text: span.textContent, height: span.getBoundingClientRect().height, lineHeight: lh };
|
||||
});
|
||||
expect(info.text).toBe("Video speed");
|
||||
// A wrapped label is ~2× a single line; allow slack but stay well under two lines.
|
||||
expect(info.height).toBeLessThan(info.lineHeight * 1.6);
|
||||
});
|
||||
Reference in New Issue
Block a user