From 95c3219a2961fda6e355b5737aed3f5274269a52 Mon Sep 17 00:00:00 2001 From: Matt Toohey Date: Wed, 15 Jul 2026 09:48:59 +1000 Subject: [PATCH] fix(desktop): let sidebar action card description wrap over multiple lines The relay connection card's subtitle (e.g. "Complete any prompts opened by the reconnect helper to continue." in the waiting-to-reconnect state) was clipped to a single line by white-space: nowrap + overflow: hidden on the settled description, so longer descriptions were cut off mid-word. Let the settled description wrap freely so the card grows to fit, and move the single-line clipping onto the roll-up reel slots (now with an ellipsis), which need a fixed one-line height only while the description change animation plays. Co-Authored-By: Claude Fable 5 Signed-off-by: Matt Toohey --- desktop/src/shared/styles/globals/animations.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/desktop/src/shared/styles/globals/animations.css b/desktop/src/shared/styles/globals/animations.css index 42a9038c67..918993dacf 100644 --- a/desktop/src/shared/styles/globals/animations.css +++ b/desktop/src/shared/styles/globals/animations.css @@ -424,8 +424,7 @@ display: inline-block; line-height: var(--buzz-sidebar-action-description-line-height); max-width: 100%; - overflow: hidden; - white-space: nowrap; + overflow-wrap: break-word; } .buzz-sidebar-action-description__motion { @@ -443,10 +442,16 @@ will-change: transform; } +/* The roll-up reel animates between two fixed one-line slots, so text is + clipped to a single line only while the transition plays; the settled + state above wraps freely. */ .buzz-sidebar-action-description__reel > span { display: block; height: var(--buzz-sidebar-action-description-line-height); line-height: var(--buzz-sidebar-action-description-line-height); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } @keyframes buzz-sidebar-action-description-roll-up {