Fixes following threads design implementation review #7100
Conversation
germain-gg
added
the
T-Task
germain-gg
changed the title
| padding: 8px; | ||
| border-radius: inherit; | ||
| border-radius: 8px; | ||
| width: calc(100% - 16px); |
There was a problem hiding this comment.
I assume box-sizing is no help to remove the calc...?
There was a problem hiding this comment.
It created all sort of funky regressions with the scrollbar. It's likely that a more elegant solution exists but I did not manage to figure it out yet
There was a problem hiding this comment.
as reference: #7105
(But gsouquet already found this anyways. Still wanted to link it here again.)
| padding: 8px; | ||
| border-radius: inherit; | ||
| border-radius: 8px; | ||
| width: calc(100% - 16px); |
There was a problem hiding this comment.
as reference: #7105
(But gsouquet already found this anyways. Still wanted to link it here again.)
| .mx_AutoHideScrollbar { | ||
| border-radius: 8px; | ||
| } |
There was a problem hiding this comment.
What do you think about this solution? #7105
I also fiddled around with this, when I wanted to get the hidden scrollbar with rounded corners working with the TimelineCard (Chat card in the right panel). I wanted it to be based on the same solution as the threads so I played around with the threads as well.
.mx_AutoHideScrollbar {
border-radius: 8px;
padding-right: 0px;
-ms-overflow-style: none; // IE and Edge
scrollbar-width: none; // Firefox
&::-webkit-scrollbar {
display: none; // Chrome, Safari, Opera
}
}Hiding the scrollbar with the browser and not do the margin/padding trick gave good results with rounded corners.
There was a problem hiding this comment.
I don't think that hiding the scrollbar is an option. They are an important indicator to orientate yourself in the app, and I believe they serve some accessibility purpose too
|
@gsouquet Thanks, Germain! I've added new issues to element-hq/element-web#19669 and marked with 🔴 NOT FIXED YET those that were checked off but aren't really fixed. |
Fixes element-hq/element-web#19646
Fixes element-hq/element-web#19645
Fixes element-hq/element-web#19629
I have not added the display name in the thread summary as we are still waiting to decide on how to tackle disambiguation in that context
This change is marked as an internal change (Task), so will not be included in the changelog.
Preview: https://618cf70ac6796447146e273f--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.