fix(bluebird): make truncated channel feed messages expandable#3325
Merged
Conversation
The channel feed clamped each task's kickoff message to 4 lines with a pure CSS `line-clamp`, so a longer prompt was cut off at a bare ellipsis with no way to read the rest. Render the prompt through `CollapsibleMessageContent` instead — the same "Show more"/"Show less" affordance the task thread's `UserMessage` already uses — so long messages can be expanded in place. `CollapsibleMessageContent` was carrying `font-medium text-[13px]` that only suited its message-bubble callers, which would have shrunk and emboldened the feed's body text. Moved that typography onto the existing callers (`UserMessage`, `QueuedMessageView` — unchanged visually) so the component is typography-neutral and the feed keeps `ThreadItemBody`'s 14px/normal styling. Its overflow measurement now uses a `ResizeObserver` rather than a one-shot on-mount read: feed rows mount inside a `content-visibility: auto` container that lays out lazily, so an on-mount measurement would miss their real height until they scroll into view (and it now also tracks reflow/resize). Generated-By: PostHog Code Task-Id: 1a8a2d95-b217-4491-9db5-fa67efb24750
|
Merging to
After your PR is submitted to the merge queue, this comment will be automatically updated with its status. If the PR fails, failure details will also be posted here |
|
React Doctor found no issues in the changed files. 🎉 Reviewed by React Doctor for commit |
Read the content height into state from a callback ref instead of a mount effect (React's recommended pattern for measuring a DOM node). This resolves the React Doctor `no-initialize-state` finding and runs the measurement in the commit phase, before paint, so long messages no longer flash unclamped for a frame before collapsing. The ResizeObserver is retained for reflow and for feed rows that lay out lazily under `content-visibility: auto`. Generated-By: PostHog Code Task-Id: 1a8a2d95-b217-4491-9db5-fa67efb24750
The collapsed-message fade was an absolutely-positioned, full-width gradient box tinted with a `fadeColor` that had to match the caller's background. In the channel feed that background isn't uniform (row hover tint) and the prompt text is often ragged, so the fade rendered as a visible full-width band past the text — janky. Switch to a paint-only CSS `mask-image` gradient on the text box itself, the same technique the chat thread's user bubble already uses. A mask fades only painted pixels, so it needs no background color to blend into and never paints a band past the text. This drops the `fadeColor` prop entirely (removed from both callers) and makes the fade correct on any background. Generated-By: PostHog Code Task-Id: 1a8a2d95-b217-4491-9db5-fa67efb24750
Cut the verbose comments in CollapsibleMessageContent down to terse one/two-liners, and lower the collapsed max-height from 160px to 120px so messages collapse a bit sooner (~6 lines), keeping the feed compact. Generated-By: PostHog Code Task-Id: 1a8a2d95-b217-4491-9db5-fa67efb24750
adboio
added
the
Stamphog
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pure UI fix that replaces a static line-clamp-4 with the existing CollapsibleMessageContent component, cleans up the gradient overlay approach (positioned div → CSS mask-image), and switches to a ResizeObserver callback ref for more accurate overflow detection. No data model, API, or business logic changes.
Contributor
|
Reviews (1): Last reviewed commit: "refactor(bluebird): trim comments, lower..." | Re-trigger Greptile |
Contributor
Author
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
1 participant
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.
Problem
In the Channels feed, a task's original message/prompt was clamped to 4 lines with a pure CSS
line-clampand cut off at a plain ellipsis — with no "See more"/"Show more" or any other way to expand and read the rest of it.Why: reported from the channels view — the truncated prompt had no affordance to expand; it just rendered a plaintext ellipsis.
Changes
ChannelFeedView) now render the prompt throughCollapsibleMessageContent— the same "Show more"/"Show less" expander the task thread'sUserMessagealready uses — instead of a hardline-clamp-4.CollapsibleMessageContenttypography-neutral: moved itsfont-medium text-[13px]onto the existing callers (UserMessage,QueuedMessageView, both visually unchanged) so the feed keepsThreadItemBody's 14px/normal body text rather than inheriting the bubble styling.ResizeObserver, so feed rows that mount off-screen undercontent-visibility: auto(and lay out lazily) measure their real height once they scroll into view.How did you test this?
tsc --noEmiton@posthog/ui— clean.session-update+canvas) — 113 tests pass, includingUserMessage.test.tsx.biome checkon the changed files — clean.Automatic notifications
Created with PostHog Code