Usability fixes for new room header #11729
Conversation
germain-gg
added
the
T-Task
res/css/views/rooms/_RoomHeader.pcss
Outdated
| /* Spacing of 64px between the topic and the buttons, but we have | ||
| to account for the gap of the flex items */ | ||
| padding-right: var(--cpd-space-13x); |
There was a problem hiding this comment.
Something is a bit strange with a large gap growing at low widths
I don't see this gap in the Figma comps
There was a problem hiding this comment.
Woops, you're very correct!
The padding ought to be applied to both the heading and the topic
res/css/views/rooms/_RoomHeader.pcss
Outdated
| /* Spacing of 64px between the topic and the buttons, but we have | ||
| to account for the gap of the flex items */ | ||
| padding-right: var(--cpd-space-13x); |
There was a problem hiding this comment.
Based on the comment it looks like the wrong variable is used, or do you mean this is 64px - $gap where $gap seems to be 4px and the math still doesn't add up. Seems just like the comment is a little confusing, maybe supplying the formula for how you get from 64->52 would be helpful!
There was a problem hiding this comment.
The gap on the flex parent is --cpd-space-3x which is 12px. It all adds up to 64px. Might cahnge the owrding of the comment
Fixes a lot of UI feedback shared as part of https://www.figma.com/file/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?type=design&node-id=1609-8863&mode=design&t=hw2eZG1msBjOombN-11
Fixes element-hq/element-web#26346
Checklist
This change is marked as an internal change (Task), so will not be included in the changelog.