diff --git a/packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx b/packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx index 9f6d896d6..9cf2b3b81 100644 --- a/packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx +++ b/packages/studio/src/components/editor/propertyPanelFxCarveModule.tsx @@ -336,10 +336,9 @@ function CarveSourceRow({ }) { return (
- + {/* Wraps like every other name in this column (see FxParamRow) — one + truncating row beside wrapping ones reads as a rendering bug. */} + Listen to {soleVoice ? ( diff --git a/packages/studio/src/components/editor/propertyPanelFxControls.test.tsx b/packages/studio/src/components/editor/propertyPanelFxControls.test.tsx index 68e35c8e8..ef9eed4c8 100644 --- a/packages/studio/src/components/editor/propertyPanelFxControls.test.tsx +++ b/packages/studio/src/components/editor/propertyPanelFxControls.test.tsx @@ -131,14 +131,19 @@ describe("FxParamRow label tooltip", () => { hint: "How long before the echo comes back.", }; - it("titles the label with the full name, and leaves the hint on the row", () => { + it("wraps the full name rather than truncating it, and leaves the hint on the row", () => { const host = document.createElement("div"); document.body.append(host); act(() => { createRoot(host).render(); }); const label = host.querySelector(".hf-fx-label"); - expect(label?.getAttribute("title")).toBe("Gap between repeats"); + // The whole name is present and allowed to wrap. No `title`: a tooltip + // answers one row on hover, wrapping answers the column at rest. + expect(label?.textContent).toBe("Gap between repeats"); + expect(label?.className).toContain("break-words"); + expect(label?.className).not.toContain("truncate"); + expect(label?.getAttribute("title")).toBeNull(); // The hint stays where it was: the two are different questions, and the // name is not a substitute for the explanation either. expect(host.querySelector(".hf-fx-row")?.getAttribute("title")).toBe( @@ -146,15 +151,15 @@ describe("FxParamRow label tooltip", () => { ); }); - it("titles it even with no hint to fall back on", () => { + it("wraps it the same way with no hint to fall back on", () => { const host = document.createElement("div"); document.body.append(host); const { hint: _hint, ...noHint } = LONG; act(() => { createRoot(host).render(); }); - expect(host.querySelector(".hf-fx-label")?.getAttribute("title")).toBe( - "Gap between repeats", - ); + const label = host.querySelector(".hf-fx-label"); + expect(label?.textContent).toBe("Gap between repeats"); + expect(label?.getAttribute("title")).toBeNull(); }); }); diff --git a/packages/studio/src/components/editor/propertyPanelFxControls.tsx b/packages/studio/src/components/editor/propertyPanelFxControls.tsx index 6895b0787..ae0fffbb7 100644 --- a/packages/studio/src/components/editor/propertyPanelFxControls.tsx +++ b/packages/studio/src/components/editor/propertyPanelFxControls.tsx @@ -188,15 +188,14 @@ export function FxParamRow({ if (param.kind === "enum") { return (