Project

General

Profile

Actions

Defect #44318

closed

Tab bar wraps to a semi-visible second row when the tabs are wider than 2000px

Added by Vincent Robert 23 days ago. Updated 12 days ago.

Status:
Closed
Priority:
Normal
Assignee:
Category:
UI
Target version:
Resolution:
Fixed
Affected version:

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

Capture d’écran du 2026-08-03 16-09-24.png (40.3 KB) Capture d’écran du 2026-08-03 16-09-24.png Vincent Robert, 2026-08-04 09:50
44318.patch (577 Bytes) 44318.patch Patch provided by Vincent Robert Go MAEDA, 2026-08-12 03:00

Related issues

Related to Redmine - Defect #32772: Tabs are displayed on two lines when the total width of the tabs is greater than 2000pxClosedGo MAEDAActions
Actions

Also available in: Atom PDF