Project

General

Profile

Actions

Defect #44445

open

Selected main menu tab looks detached from the content area due to gaps above and below it

Added by Go MAEDA 1 day ago. Updated about 12 hours ago.

Status:
New
Priority:
Normal
Category:
UI
Target version:
Resolution:
Affected version:

Description

#43937 redesigned the header and changed the main menu tabs to a new style in which the selected tab is highlighted with a marker line at its bottom. In this new style, however, the selected tab looks like a detached white rectangle floating inside the menu bar rather than a tab attached to the content area below. There is a 2px strip of the menu bar background above the tab and a thin strip of about 1px below the marker line. This happens in the default theme and is especially noticeable on high-DPI displays.

The attached patch removes the vertical padding of #main-menu, sets the minimum height of #main-menu ul to 32px (the height of the menu bar), and gives the tab links a fixed 16px line height with 9px top and 7px bottom padding. The fixed line height is used so that the tab height adds up to exactly 32px without sub-pixel rounding. The selected tab and the hover highlight now fill the full height of the menu bar and touch both the header above and the content area below. The vertical position of the tab labels and the overall height of the header are unchanged. The Classic and Alternate themes are not affected.


Files


Related issues

Related to Redmine - Feature #43937: Redesign the header with a navigation bar and lighter visual weightClosedGo MAEDAActions
Actions

Also available in: Atom PDF