Fix the top bar going outside the window#33752
Conversation
There was a problem hiding this comment.
It seems unneeded - the layout is still responsive.
There was a problem hiding this comment.
It technically looks better too. It's interesting that without this property, the underlying elements occupy their own minimal space, while if min-width of the parent is specified, they're squeezed inside the parent.
Here's a comparison:
| Without min-width | With min-width |
|---|---|
 |
 |
gzdunek
force-pushed
the
gzdunek/fix-top-bar-overflow
branch
from
95f59da to
207de94
Compare
ravicious
left a comment
ravicious
left a comment
There was a problem hiding this comment.
Looks good. On Friday when we were chatting about this I brought up adding a possible scroll to accommodate people who increase the zoom level in the window (see screenshots in one of my comments) but:
- Technically the previous implementation didn't accommodate for zoom anyway.
- It's much easier to add this single min-width rather than to figure out how to deal with the scroll, and we don't have much time for the latter.
There was a problem hiding this comment.
It technically looks better too. It's interesting that without this property, the underlying elements occupy their own minimal space, while if min-width of the parent is specified, they're squeezed inside the parent.
Here's a comparison:
| Without min-width | With min-width |
|---|---|
|
|
| min-width: calc(${props => props.theme.space[9]}px * 2); | ||
| // min-width causes the filters and the actual input text to be broken into | ||
| // two lines when there is no space | ||
| min-width: calc(${props => props.theme.space[8]}px * 2); |
There was a problem hiding this comment.
I assume this had to be dropped from 9 to 8 to make everything fit?
I remember setting it to a specific width (but I don't remember why because I didn't leave a comment 🙃), probably for both filters to fit on a single line even when the window is at its narrowest. But at the smallest window width, it's probably better to make the top bar usable rather than to keep both filters in the same line.
There was a problem hiding this comment.
Yeah, when the width was 9, the content of the input was a little too wide.
But at the smallest window width, it's probably better to make the top bar usable rather than to keep both filters in the same line.
👍
public-teleport-github-review-bot
Bot
removed the request for review
from rudream
3 participants
Before:
After:
Changelog: Fix the top bar breaking layout when the window is narrow in Connect.