From 6ec1dcf66989e2421f9366cc960f32622fd59208 Mon Sep 17 00:00:00 2001 From: Jicheng Lu <103353@smsassist.com> Date: Thu, 28 May 2026 16:54:15 -0500 Subject: [PATCH] refine collapse styling --- src/lib/styles/pages/_chat.scss | 21 ++++++++++- src/lib/styles/pages/_conversation.scss | 35 ++++++++++++++++--- src/routes/VerticalLayout/Sidebar.svelte | 10 +++--- .../message-state-log-element.svelte | 34 +++++++++++++++--- .../persist-log/content-log-element.svelte | 34 ++++++++++++++---- .../conv-dialog-element.svelte | 24 ++++++++++++- 6 files changed, 136 insertions(+), 22 deletions(-) diff --git a/src/lib/styles/pages/_chat.scss b/src/lib/styles/pages/_chat.scss index a1e81e6f..8f2595ca 100644 --- a/src/lib/styles/pages/_chat.scss +++ b/src/lib/styles/pages/_chat.scss @@ -2996,17 +2996,36 @@ flex-wrap: wrap; gap: 6px; margin-top: 4px; + min-width: 0; } .mss-state-value { flex: 1 1 calc(50% - 6px); - min-width: calc(50% - 6px); + min-width: 0; + max-width: 100%; font-size: 14px; padding: 4px 8px; border-radius: 6px; background-color: color-mix(in srgb, white 3%, transparent); border: 1px solid color-mix(in srgb, white 5%, transparent); + cursor: pointer; +} + + +.mss-value { + overflow-wrap: anywhere; + word-break: break-word; + white-space: pre-wrap; +} + + +.mss-state-value-collapsed .mss-value { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + word-break: normal; + overflow-wrap: normal; } diff --git a/src/lib/styles/pages/_conversation.scss b/src/lib/styles/pages/_conversation.scss index 3ee9200d..6a0590a8 100644 --- a/src/lib/styles/pages/_conversation.scss +++ b/src/lib/styles/pages/_conversation.scss @@ -266,11 +266,11 @@ * ======================================================================== * Replaces the legacy `.text-collapse` rule from * src/lib/scss/custom/pages/_conversation.scss. The dialog text is - * collapsed to the first 5 lines by default; clicking the More button + * collapsed to the first 10 lines by default; clicking the More button * removes this class so the content can flow to its natural height. * * Two clamping mechanisms are layered here for reliability: - * 1. `-webkit-line-clamp: 5` with `display: -webkit-box` gives the + * 1. `-webkit-line-clamp: 10` with `display: -webkit-box` gives the * nicer "line truncation with ellipsis" effect on simple text. * 2. `max-height: 10lh` is the hard fallback. The inner `` * wraps its rendered HTML in a `.markdown-container` with @@ -278,15 +278,40 @@ * context — that BFC defeats line-clamp on the parent because text * flow is sealed inside the child. The max-height cap clips * reliably regardless of inner BFCs and is what actually keeps long - * code blocks / tables collapsed. + * code blocks / tables collapsed. A `::after` pseudo-element below + * paints a '...' in the bottom-right corner so the truncation is + * still signaled visually when line-clamp's native ellipsis is + * suppressed by the inner BFC. */ .text-collapse { + position: relative; overflow: hidden; max-height: 10lh; display: -webkit-box; -webkit-box-orient: vertical; - -webkit-line-clamp: 5; - line-clamp: 5; + -webkit-line-clamp: 10; + line-clamp: 10; +} + +/* Ellipsis fallback for collapsed content whose inner BFC defeats + * -webkit-line-clamp (notably the Markdown container's overflow-x: auto + * around code blocks / tables). The native line-clamp ellipsis already + * handles plain text; this pseudo-element guarantees a '...' indicator + * is rendered even when line-clamp is sealed inside the child BFC. + * + * The gradient fades from transparent to the conversation page + * background (white) so the '...' sits cleanly over the last visible + * line without obscuring readable text. */ +.text-collapse::after { + content: '...'; + position: absolute; + right: 0; + bottom: 0; + padding: 0 0.25rem 0 1.5rem; + background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255 255 255) 50%); + color: inherit; + font-weight: inherit; + pointer-events: none; } diff --git a/src/routes/VerticalLayout/Sidebar.svelte b/src/routes/VerticalLayout/Sidebar.svelte index 9cc3e981..c86dc71c 100644 --- a/src/routes/VerticalLayout/Sidebar.svelte +++ b/src/routes/VerticalLayout/Sidebar.svelte @@ -292,7 +292,7 @@ {:else if item.subMenu}
  • - + {$_(item.label)} @@ -301,14 +301,14 @@ {#if subMenu.isChildItem}
  • - + {$_(subMenu.label)}