fix(dashboard): extend the narrow band to the width it still clipped - #1432
Merged
Conversation
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.
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
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.
The band that swaps the chat panes ended one pixel short. The room is
viewport - 646with 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: hiddenclips 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.What changed
@media (min-width: 769px) and (max-width: 888px)becomes889px.646 + 244 - 1.Impact
Measured against the built bundles (
index-*.cssplusChats-*.cssfromnpm run build), not the source file, with the real webfont.sendVsClipis the send button's right edge against the layout's padding box, the actual clip edge; negative is inside.Navigation collapsed is unchanged at 888, 889 and 890, as it was before: that state never clipped.
Verification
Refs #1422