From 5bd9f9fe4f70c289bdb130c2a9e6bb88ce3122b3 Mon Sep 17 00:00:00 2001 From: dev Date: Wed, 27 May 2026 19:17:32 +0200 Subject: [PATCH] fix(words): slash menu wider + description wraps to 2 lines instead of ellipsis (F4.5a) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before: - Menu width was 7× button-size (≈224px), so even short descriptions clipped: "Large section headin…", "Blockquote callou…". - Description was single-line nowrap+ellipsis, doubling the clipping. After: - Menu width 10× button-size (≈320px) — enough room for the longest default description ("Large section heading") without truncation. - Description switches to a 2-line line-clamp with line-height 1.3, so longer custom descriptions still degrade gracefully instead of silently disappearing past the first line. Label still nowrap+ellipsis (the bold first line is supposed to be a short title; if it doesn't fit, that's an author issue worth a visual cue). CSS-only in words.css. Visible immediately on the demo's SlashMenu. Co-Authored-By: Claude Opus 4.7 (1M context) --- src/uix/eidos/components/words/words.css | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/src/uix/eidos/components/words/words.css b/src/uix/eidos/components/words/words.css index 203e91b35..96d7285b2 100644 --- a/src/uix/eidos/components/words/words.css +++ b/src/uix/eidos/components/words/words.css @@ -245,7 +245,10 @@ inset-inline-start: var(--_words-slash-x); display: grid; gap: var(--button-gap-xs); - inline-size: min(calc(var(--_words-button-size) * 7), 92vw); + /* Widened from 7× to 10× button-size so option descriptions ("Large + section heading", "Blockquote callout") fit instead of clipping + with ellipsis. Still capped at 92vw for mobile. */ + inline-size: min(calc(var(--_words-button-size) * 10), 92vw); max-block-size: min(calc(var(--_words-button-size) * 10), 70vh); overflow: auto; padding: var(--words-toolbar-py-sm); @@ -313,22 +316,28 @@ min-inline-size: 0; } -[data-words-slash-label], -[data-words-slash-description] { +[data-words-slash-label] { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; -} - -[data-words-slash-label] { color: inherit; font-weight: var(--words-strong-font-weight); } +/* Description wraps to up to 2 lines instead of single-line ellipsis so + the user sees the full "Plain text block" / "Large section heading" + description rather than a truncated tail. line-clamp keeps the menu + compact regardless of unusually long custom descriptions. */ [data-words-slash-description] { + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + min-inline-size: 0; + overflow: hidden; color: var(--words-status-color); font-size: var(--words-status-font-size); + line-height: 1.3; } [data-words-slash-option][data-active] [data-words-slash-description] {