fix(words): slash menu wider + description wraps to 2 lines instead of ellipsis (F4.5a)

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) <noreply@anthropic.com>
active-uix
dev 4 months ago
parent eb6a019b5a
commit 5bd9f9fe4f

@ -245,7 +245,10 @@
inset-inline-start: var(--_words-slash-x); inset-inline-start: var(--_words-slash-x);
display: grid; display: grid;
gap: var(--button-gap-xs); 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); max-block-size: min(calc(var(--_words-button-size) * 10), 70vh);
overflow: auto; overflow: auto;
padding: var(--words-toolbar-py-sm); padding: var(--words-toolbar-py-sm);
@ -313,22 +316,28 @@
min-inline-size: 0; min-inline-size: 0;
} }
[data-words-slash-label], [data-words-slash-label] {
[data-words-slash-description] {
min-inline-size: 0; min-inline-size: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
}
[data-words-slash-label] {
color: inherit; color: inherit;
font-weight: var(--words-strong-font-weight); 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] { [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); color: var(--words-status-color);
font-size: var(--words-status-font-size); font-size: var(--words-status-font-size);
line-height: 1.3;
} }
[data-words-slash-option][data-active] [data-words-slash-description] { [data-words-slash-option][data-active] [data-words-slash-description] {

Loading…
Cancel
Save

Powered by TurnKey Linux.