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] {