feat(desktop): clamp sticky human messages to ~2 lines until hover/focus#37877
Merged
Conversation
Long user prompts stick to the top of the thread while the response streams beneath them, so a multi-line prompt could eat most of the viewport. Clamp the read-only human bubble's text to ~2 lines with a soft bottom fade; the clamp lifts on hover or keyboard focus, and clicking the bubble still opens the edit composer (which shows the full text). Short messages are untouched — no clamp, no fade. Overflow is measured on an unclamped inner wrapper so the ResizeObserver only fires on real content/width changes, not every frame while the outer max-height animates open; the measured height feeds --human-msg-full so expand/collapse animate to the true height instead of overshooting the cap.
Contributor
🔎 Lint report:
|
Pin user bubbles 0.75rem below the scroll top via a single token instead of flush top-0, so the sticky header doesn't sit hard against the thread edge.
davidgut1982
pushed a commit
to davidgut1982/hermes-agent
that referenced
this pull request
Jun 5, 2026
…icky-msg-clamp feat(desktop): clamp sticky human messages to ~2 lines until hover/focus
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Long user prompts stick to the top of the thread while the response streams beneath them, so a multi-line prompt could eat most of the viewport. This clamps the read-only human bubble's text to ~2 lines with a soft bottom fade; the clamp lifts on hover or keyboard focus, and clicking the bubble still opens the edit composer (which already shows the full text). Short messages are untouched — no clamp, no fade.
Changes
thread.tsx(UserMessage) — wraps the message text in a.sticky-human-clampelement and measures an unclamped inner wrapper viauseResizeObserver, so the observer only fires on real content/width changes, not every frame while the outermax-heightanimates open. Setsdata-clampedonly when the text actually exceeds 2 lines, and writes the measured height to--human-msg-full.styles.css— the clamp (max-height≈ 2 lines +overflow: hidden), the fademask-image(gated on[data-clamped='true']), and the hover/focus-withinexpansion (animates to--human-msg-full, capped at24remwith internal scroll), all with a0.2smax-heighttransition.Branches off
main(after #37866 merged).Test plan
55%fade start,24remcap,0.2s) behave as expected.🤖 Generated with Cursor