fix: keep embedded channel view inside narrow host panels#107
Merged
Conversation
OpenClaw embeds the channel view in a ~400px discussion sidebar. The embed shell's implicit grid column sized to the largest child min-content width, so long unbreakable OpenClaw session channel names in the empty-state heading forced the layout to ~443px and clipped the header link and send button. Cap the column with minmax(0, 1fr), let the empty-state heading wrap with overflow-wrap: anywhere, and add a 400px-viewport Playwright regression test that fails without the fix once webfonts settle.
Contributor
|
ClawSweeper status: review started. I am starting a fresh review of this pull request: fix: keep embedded channel view inside narrow host panels This is item 1/1 in the current shard. Shard 0/1. This placeholder means the worker is alive and reading the current context. I will edit this same comment with the actual review when the claws are done clicking. Crustacean status: shell secured, claws on keyboard, evidence pebbles being sorted. |
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.
What Problem This Solves
OpenClaw embeds the ClickClack channel view in its discussion side panel, which is only ~400-450px wide. OpenClaw session channels have long unbreakable names like
s-8a4123d56515f4446b2cdef3f5693a66, and at those widths the embed rendered wider than its host: the "Open in ClickClack" header link and the composer send button were clipped off the right edge, and the empty-state welcome heading ran past the panel boundary.Why This Change Was Made
.embed-channel-shellis a single-column CSS grid. Implicit grid columns size to the largest child min-content width, and grid items default tomin-width: auto, so the empty-state heading's unbreakable channel-name token forced the entire column to ~443px regardless of the actual viewport. The shell'soverflow: hiddenthen clipped everything on the right. Constraining the column withgrid-template-columns: minmax(0, 1fr)caps the track at the host width so children shrink and truncate as designed, andoverflow-wrap: anywhereon the empty-state heading lets long channel names wrap instead of overflowing.The new Playwright regression test loads an empty channel with an OpenClaw-session-style name at a 400px viewport and asserts the header, message list, composer dock, header link, and send button all stay inside the viewport, before and after posting a message with a long unbreakable token. The bounding-box assertions fail without the CSS fix (header 440px wide, link right edge at 424px, send button at 417px); the test settles
document.fonts.readyfirst because the overflow margin only exists with the display webfont's wider metrics active.User Impact
ClickClack embedded in narrow host panels (OpenClaw's discussion sidebar and any similar embed) now fits: the header link and send button stay visible and the welcome message wraps inside the panel.
Evidence
Before (400px viewport, dark mode)
After (400px viewport, dark mode)
pnpm test:e2e tests/e2e/embed-channel.spec.ts tests/e2e/embed-thread.spec.ts