-
+ {/* 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 (