Defect #44318
closedTab bar wraps to a semi-visible second row when the tabs are wider than 2000px
Description
The tab bar is meant to overflow horizontally. But the list is sized with a hardcoded constant:
#content .tabs ul {
min-inline-size: 2000px;
inline-size: 100%;
}

Past 2000px the tabs wrap to a second row.
The core project settings tabs are about 700px wide, so usually stays under the limit. But the limit is reached on instances whose plugins add tabs to the settings pages, project_settings_tabs being a common extension point.
Proposed patch:
- min-inline-size: 2000px;
- inline-size: 100%;
+ min-inline-size: 100%;
+ inline-size: max-content;
min-inline-size: 100% keeps the bottom border spanning the full width of the container when there are only a few tabs.inline-size: max-content sizes the list to its content, so the tabs stay on a single row whatever their number.
Files
Related issues
Updated by Go MAEDA about 1 month ago
- Related to Defect #32772: Tabs are displayed on two lines when the total width of the tabs is greater than 2000px added
Updated by Go MAEDA about 1 month ago
- File 44318.patch 44318.patch added
- Target version set to 7.0.1
Setting the target version to 7.0.1.
Updated by Go MAEDA about 1 month ago
- Status changed from New to Resolved
- Assignee set to Go MAEDA
- Resolution set to Fixed
Committed the fix in r24887. Thank you.
Updated by Go MAEDA about 1 month ago
- Status changed from Resolved to Closed
Merged the fix into 7.0-stable branch in r24890.