Fixing: https://linear.app/comm/issue/ENG-2610/top-bar-on-web-displays-incorrectly-for-long-names
I needed to make broad changes to top bar, as it was not styled correctly, so fix was really using flexbox correctly and then make overflow appear as ellipsis.
Details
Details
Screen shots:
Diff Detail
Diff Detail
- Repository
- rCOMM Comm
- Branch
- fix/long-names
- Lint
No Lint Coverage - Unit
No Test Coverage
Event Timeline
| web/chat/chat-thread-ancestors.css | ||
|---|---|---|
| 6 | we set shrink to 0.75 as we want threads container shrink less, so it occupy larger part of a screen than thread name itself. I found that value the best, and I couldn't find strict specification in Figma | |
| 8–15 | now ancestor name is "artistic" styles only, and not layout related. We handle layout with seperate css classes for each element: .ancestorKeyserver, .middle, .currentThreadName | |
| 45 | I used those on elements that shouldn't grow nor shrink like menu dots on the right, color thread box or svg arrow separators | |
| 49–51 | Used for creating ellipsis | |
| 54 | we need this in flex items that we want to overflow using ellipsis: https://bugzilla.mozilla.org/show_bug.cgi?id=1086218#c4 | |
Comment Actions
Note that this diff is not tied to monthly goals, so reviewers (and author) please treat it as low-pri
Comment Actions
It sounds like @inka is going to take this on since she's restyling the "top bar" anyways