Skip to content

fix(dashboard): extend the narrow band to the width it still clipped - #1432

Merged
rmyndharis merged 1 commit into
mainfrom
fix/chats-band-upper-bound
Aug 21, 2026
Merged

fix(dashboard): extend the narrow band to the width it still clipped#1432
rmyndharis merged 1 commit into
mainfrom
fix/chats-band-upper-bound

Conversation

@rmyndharis

Copy link
Copy Markdown
Owner

The band that swaps the chat panes ended one pixel short. The room is viewport - 646 with the navigation expanded and the composer's minimum is 244px, so the first viewport at which two panes fit is 890, not 889. At exactly 889px the two-pane layout was kept and one pixel column of the send button fell outside the panel's clip.

Root cause of the off-by-one

The measurement that set the bound compared the send button's right edge against .chats-layout's border box. overflow: hidden clips at the padding box, and that element carries a 1px border, so every threshold derived that way was low by exactly one. Three published figures inherit it, and all three are corrected here.

Figure Published Measured
Band upper bound 888px 889px
Composer clip started below 1014px 1015px
Phone widths affected 402px and narrower 403px and narrower

What changed

  • @media (min-width: 769px) and (max-width: 888px) becomes 889px.
  • The block comment stated "from 889px the room fits the composer again" and claimed the bound tracks the composer's minimum. Neither was true; it now states the arithmetic it is derived from, 646 + 244 - 1.
  • The two changelog figures above are corrected in place.

Impact

Measured against the built bundles (index-*.css plus Chats-*.css from npm run build), not the source file, with the real webfont. sendVsClip is the send button's right edge against the layout's padding box, the actual clip edge; negative is inside.

Viewport Before After
888px column, −24.0 column, −24.0
889px row, layout overflow 1px, +1.0 (clipped) column, overflow 0, −24.0
890px row, 0.0 row, 0.0
891px row, −1.0 row, −1.0

Navigation collapsed is unchanged at 888, 889 and 890, as it was before: that state never clipped.

Verification

  • A 53 width sweep from 769px to 1440px, one pixel apart across 881..900 and wider steps outside it, asserting per row that the rendered viewport matched the requested one and that the webfont was loaded: 0 empty rows, 0 widths where the layout overflows or the send button crosses the clip. Before this change that sweep reports 889px.
  • Boundary table above reproduced on the built bundle, so it reflects what ships rather than the source file.
  • Dashboard lane: lint, format:check, typecheck, i18n parity, unit tests. Docs lane: 264 tests. The page-CSS scope gate passes, 11 of 11.

Refs #1422

The band that swaps the chat panes ended at 888px, one pixel short. The
room is `viewport - 646` and the composer needs 244px, so the first
viewport where two panes fit is 890, not 889. At exactly 889px with the
navigation expanded the two-pane layout was kept and one pixel column of
the send button fell outside the panel's clip.

The measurement that set the old bound compared the button against the
layout's border box, but `overflow: hidden` clips at the padding box and
the layout carries a 1px border, so every threshold derived that way was
low by one. The same correction applies to the two figures the changelog
quotes for the earlier fix: the clip started below 1015px rather than
1014px, and on phones at 403 CSS px rather than 402.
@rmyndharis
rmyndharis merged commit 3c83204 into main Aug 21, 2026
9 checks passed
@rmyndharis
rmyndharis deleted the fix/chats-band-upper-bound branch August 21, 2026 09:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant