Fix Project overview controls' layout
Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.
Problem
On Project Overview's page, the breadcrumbs and controls do not align correctly due to limited space, when project names are long:
This actually happens with directory_code_dropdown_updates both turned on and off.
This isn’t a problem on the Repository pages, since the breadcrumbs are on a separate line than the buttons. But on the overview, they’re all on one row and there’s simply not enough space for them. The problem happens both on the md viewport, but also on the lg viewport right after the left sidebar pops in, but the width is still not enough to accommodate all the elements.
I’ve tried the truncating of the project name and tweaking the flexbox properties. None of these solutions were good. I think the most feasible way will be to have two rows: ref selector + breadcrumbs controls Here’s a comparison (probably needs some whitespace between the rows as well):
A note from @andr3:
Might be worth persisting this in an issue to discuss. (btw..
👴 These scenarios were the target of a very oldie (but goldie) web design book https://www.amazon.com/Bulletproof-Web-Design-flexibility-protecting/dp/0321509021)I'd avoid truncating the project name if possible and just have the rest of the UI adjust to whatever length we have, not letting non-spaced words break the layout. Hence the issue will be useful to capture that discussion around the edge cases.
The screenshot you showed of it falling into two rows is a nice fallback, but not imposing those two rows when not necessary. I know this is out of fashion
😄 but float: right; might help achieve what we want instead of relying on flexbox.
Design proposal
See #556434 (comment 2659601834)
Switched the branch selector/breadcrumbs, and the project title for the following reasons:
- Breadcrumbs at the top are more logical and consistent with how breadcrumbs are displayed on the directory pages
- Text can overflow onto the next line if needed
- Appropriate visual hierarchy is preserved between Project Overview page (large H1) and directory pages (smaller H2)
| Current | Design proposal |
|---|---|
|
Project Overview default
Project Overview overflowing breadcrumbs
Directory page
|
Default
Overflowing breadcrumbs
|
