[pull] main from rmyndharis:main - #118
Merged
Merged
Conversation
A text input contributes its intrinsic width as its automatic minimum, so the composer could not go below 369px however narrow its pane got. With the navigation expanded the room only reaches that at a 1014px viewport, and below it the send button sat outside the clip of .chats-layout, unreachable by pointer and with no scrollbar to recover it. Enter still submitted the form, so the control was lost rather than the feature. The floor drops to 214px, which moves the threshold to 859px with the navigation expanded and below the whole two-pane range with it collapsed. The remaining 769px to 858px band is tracked in #1422.
fix(dashboard): let the chat composer shrink with its pane
The heading in those two panes carried none of the truncation its twin in the chat header has, so a title with no break opportunity kept its full natural width, ran past the panel and was cut mid-glyph by the layout's overflow with nothing to signal that text was missing. Neither heading exposed the full value anywhere either. overflow: hidden is the load-bearing declaration: it both clips and zeroes the flex item's automatic minimum, so nowrap and ellipsis need no min-width here or on an ancestor to engage.
The comment justifying the icon's flex-shrink opt-out claimed both of the icon's siblings opted out and that the icon was the only flexible item in the row. Neither held: the back button is display:none above the mobile breakpoint, and the heading has always had flex-shrink 1, resting only on its automatic minimum. Truncating the heading removes that minimum, so the heading now shares the deficit and the icon lands at a couple of pixels rather than zero. The opt-out stays load-bearing; only its stated mechanism moved.
fix(dashboard): truncate the channel and status pane heading
With the navigation expanded the chat room is `viewport - 646`, so between the mobile breakpoint and 888px it is narrower than the composer's own minimum and the send button fell outside the panel's clip, with neither a scrollbar nor a visible text field to work around it. Narrowing the chat list cannot pay for this: its own header floors at 245px in English and 270px in French, well above the 229px the budget allows. The panes now swap one at a time across that band, which is the behaviour the page already has on a phone, and the room goes from 123px to 443px at the narrow end. The band is keyed to the navigation as well as the viewport, so the collapsed nav, where the room already fits, is untouched at every width. The message input also gains a 64px floor. It could previously shrink to its own padding and border and render a text box exactly zero pixels wide, which kept the send button reachable at the cost of hiding what the user typed.
fix(dashboard): swap the chat panes where two do not fit
Two elements in the chat pane carried no width constraint of their own, so once the room was narrow they painted through their neighbours and out past the panel's clip. The reply banner's quoted name was the only text node there without the truncation its own sibling body already has, so an unbreakable name kept its box and its ink ran across the close button: 44px across it at 25 characters and 162px at 40, measured at the narrowest two-pane width. The location message's map preview carried its size as an inline pixel width, the one media element in a bubble not bounded by its container. It stayed 220px wide however narrow the room got, passing the clip by 15px. It now sizes from a class beside the other media types and keeps the same cap, bounded by the bubble.
…siduals fix(dashboard): keep the reply name and map preview inside the panel
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
See Commits and Changes for more details.
Created by
pull[bot] (v2.0.0-alpha.4)
Can you help keep this open source service alive? 💖 Please sponsor : )