From a36bb47c84fea32bad4b7a79dc314563ae09bc04 Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 16 Oct 2026 04:24:19 +0200 Subject: [PATCH] enhance(ui): use normal line-height for buttons and selection dropdowns (#39796) The legacy Fomantic `line-height: 1` on buttons made ellipsized button text clip descenders like `g` letters, like in the PR target branch selector. Selection dropdowns were 3px taller than the inputs and buttons next to them because their padding assumed `line-height: 1em`. - Buttons and selection dropdowns use `--line-height-default` with smaller vertical padding, `min-height` keeps their sizes for every font including CJK - Remove overrides that only compensated for the old values and dropdown declarations that never applied - Label-edit and push-mirror modals use regular-size action buttons like all other modals --- .../repo/issue/labels/label_edit_modal.tmpl | 4 +-- .../repo/settings/push_mirror_sync_modal.tmpl | 4 +-- web_src/css/modules/button.css | 9 +++---- web_src/css/modules/dropdown.css | 25 ++----------------- web_src/css/modules/header.css | 2 +- web_src/css/modules/input.css | 4 --- web_src/css/modules/modal.css | 2 +- web_src/css/repo.css | 1 - 8 files changed, 12 insertions(+), 39 deletions(-) diff --git a/templates/repo/issue/labels/label_edit_modal.tmpl b/templates/repo/issue/labels/label_edit_modal.tmpl index 85d53514195..0eb238fb655 100644 --- a/templates/repo/issue/labels/label_edit_modal.tmpl +++ b/templates/repo/issue/labels/label_edit_modal.tmpl @@ -57,11 +57,11 @@
- - diff --git a/templates/repo/settings/push_mirror_sync_modal.tmpl b/templates/repo/settings/push_mirror_sync_modal.tmpl index 25e293447c4..2c34ff64a22 100644 --- a/templates/repo/settings/push_mirror_sync_modal.tmpl +++ b/templates/repo/settings/push_mirror_sync_modal.tmpl @@ -14,11 +14,11 @@
- - diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 4efbe538e18..558a575cab0 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -10,7 +10,7 @@ font-size: 1rem; text-align: center; text-decoration: none; - line-height: 1; + line-height: var(--line-height-default); border-radius: var(--border-radius); user-select: none; -webkit-tap-highlight-color: transparent; @@ -92,19 +92,18 @@ } .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) { margin: 0 0.42857143em 0 -0.21428571em; - vertical-align: baseline; } /* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */ .ui.button { /* stylelint-disable-line no-duplicate-selectors -- deliberate second block for the reference sizes */ gap: var(--gap-block); min-height: 38px; - padding: 0.57em /* around 8px */ 1.43em /* around 20px */; + padding: 0.43em /* around 6px, keeps CJK text within min-height */ 1.43em /* around 20px */; } .ui.compact.buttons .button, .ui.compact.button { gap: var(--gap-inline); - padding: 6px 15px; + padding: 3px 15px; min-height: 32px; } .ui.compact.icon.buttons .button, @@ -149,7 +148,7 @@ .ui.icon.buttons .button, .ui.icon.button:not(.compact) { - padding: 0.57em; + padding-inline: 0.57em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { diff --git a/web_src/css/modules/dropdown.css b/web_src/css/modules/dropdown.css index cbd00aecccb..55249b81a1b 100644 --- a/web_src/css/modules/dropdown.css +++ b/web_src/css/modules/dropdown.css @@ -5,6 +5,7 @@ position: relative; display: inline-block; outline: none; + line-height: var(--line-height-default); text-align: left; user-select: none; -webkit-tap-highlight-color: transparent; @@ -39,9 +40,6 @@ } .ui.dropdown > .dropdown.icon { - line-height: 1; - height: 1em; - width: auto; backface-visibility: hidden; text-align: center; } @@ -50,7 +48,6 @@ position: relative; width: auto; font-size: 0.85714286em; - margin: 0 0 0 1em; } .ui.dropdown > .text { @@ -173,15 +170,13 @@ select.ui.dropdown { .ui.selection.dropdown { cursor: pointer; overflow-wrap: break-word; - line-height: 1em; white-space: normal; outline: 0; transform: rotateZ(0deg); - min-width: 14em; min-height: 2.71428571em; background: var(--color-input-background); display: inline-block; - padding: 0.78571429em 3.2em 0.78571429em 1em; + padding: 0.43em 3.2em 0.43em 1em; color: var(--color-input-text); box-shadow: none; border: 1px solid var(--color-input-border); @@ -197,13 +192,8 @@ select.ui.dropdown { cursor: pointer; position: absolute; width: auto; - height: auto; line-height: 1.21428571em; - top: 0.78571429em; - right: 1em; z-index: 3; - margin: -0.78571429em; - padding: 0.91666667em; opacity: 0.8; } @@ -409,10 +399,6 @@ select.ui.dropdown { .ui.dropdown > .remove.icon { cursor: pointer; font-size: 0.85714286em; - margin: -0.78571429em; - padding: 0.91666667em; - right: 3em; - top: 0.78571429em; position: absolute; opacity: 0.6; z-index: 3; @@ -799,13 +785,6 @@ select.ui.dropdown { font-size: 0.92857143rem; } -/* This rule must come AFTER .ui.selection.dropdown because both have - specificity (0,3,0) and source order determines the winner. - In the original codebase this was in base.css which loaded after fomantic. */ -.ui.dropdown:not(.button) { - line-height: var(--line-height-default); -} - /* Icons / Flags / Labels / Image */ .ui.dropdown > .text > img, .ui.dropdown .menu > .item > img { diff --git a/web_src/css/modules/header.css b/web_src/css/modules/header.css index e20240ac6aa..54d19c798fa 100644 --- a/web_src/css/modules/header.css +++ b/web_src/css/modules/header.css @@ -107,7 +107,7 @@ h4.ui.header { /* the default ".ui.attached.header > .ui.right" is only able to contain "tiny" buttons, other buttons are too large */ .ui.attached.header > .ui.right .ui.tiny.button { - padding: 6px 10px; + padding-inline: 10px; font-weight: var(--font-weight-normal); } diff --git a/web_src/css/modules/input.css b/web_src/css/modules/input.css index e1766b0bf6d..15aad567b59 100644 --- a/web_src/css/modules/input.css +++ b/web_src/css/modules/input.css @@ -91,8 +91,6 @@ display: flex; align-items: center; flex: 0 0 auto; - padding-top: 0.78571429em; - padding-bottom: 0.78571429em; margin: 0; } @@ -132,8 +130,6 @@ .ui.action.input .ui.ui.button { border-color: var(--color-input-border); - padding-top: 0; /* the ".action.input" is "flex + stretch", so let the buttons layout themselves */ - padding-bottom: 0; } /* currently used for search bar dropdowns in repo search and explore code */ diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css index 9c41eecea8d..b89b83b7ed4 100644 --- a/web_src/css/modules/modal.css +++ b/web_src/css/modules/modal.css @@ -111,7 +111,7 @@ like "small" and "mini" are still kept for the HTML elements, these can be clean display: inline-flex; gap: var(--gap-inline); align-items: center; - padding: 10px 12px 10px 10px; + padding-inline: 10px 12px; margin-left: 0.75em; margin-right: 0; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 911b2fe28b3..ff4f66d0939 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1726,7 +1726,6 @@ tbody.commit-list { .branch-selector-dropdown .ui.button.branch-dropdown-button { margin: 0; max-width: 340px; - line-height: var(--line-height-default); padding: 0 0.5em 0 0.75em; }