github/gitea
4
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-10-19 16:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

enhance(ui): use normal line-height for buttons and selection dropdowns (#39796)

Browse Source 
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
This commit is contained in:
silverwind
2026-10-16 02:24:19 +00:00
committed by GitHub
parent 8d6b3e48d3
commit a36bb47c84
8 changed files with 12 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/repo/issue/labels/label_edit_modal.tmpl
+2 -2
View File
@@ -57,11 +57,11 @@
</form>
</div>
<div class="actions">
<button type="button" class="ui small basic cancel button">
<button type="button" class="ui basic cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "cancel"}}
</button>
<button type="button" class="ui primary small approve button">
<button type="button" class="ui primary approve button">
{{svg "fontawesome-save"}}
{{ctx.Locale.Tr "save"}}
</button>
templates/repo/settings/push_mirror_sync_modal.tmpl
+2 -2
View File
@@ -14,11 +14,11 @@
<input id="push-mirror-edit-interval" name="push_mirror_interval" class="tw-w-auto">
</div>
<div class="actions">
<button type="button" class="ui small basic cancel button">
<button type="button" class="ui basic cancel button">
{{svg "octicon-x"}}
{{ctx.Locale.Tr "cancel"}}
</button>
<button type="submit" class="ui primary small approve button">
<button type="submit" class="ui primary approve button">
{{svg "fontawesome-save"}}
{{ctx.Locale.Tr "save"}}
</button>
web_src/css/modules/button.css
+4 -5
View File
@@ -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 {
web_src/css/modules/dropdown.css
+2 -23
View File
@@ -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 {
web_src/css/modules/header.css
+1 -1
View File
@@ -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);
}
web_src/css/modules/input.css
-4
View File
@@ -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 */
web_src/css/modules/modal.css
+1 -1
View File
@@ -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;
}
web_src/css/repo.css
-1
View File
@@ -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;
}