mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

Use flex for switch items (#6544) 

[skip ci] no related tests (covered by visual testing only)

Followup to https://codeberg.org/forgejo/forgejo/pulls/6459.

More specifically, to https://codeberg.org/forgejo/forgejo/pulls/6459#issuecomment-2562521. Thanks, @viceice!

I found a good reason to use `display: flex;` for the switch items: it prevents whitespaces between HTML tags from showing up between the icon and the text.

I was wondering why the new switch is wider, now I noticed why while playing with it. Lack of this additional whitespace looks better and is consistent with most of the UI.

## Preview

|Description|Image|
|-|-|
|The margin that's supposed to be (no whitespace)|![](https://codeberg.org/attachments/c0377eaa-7dec-4ef1-a4d6-70ad67608a8c)|
|Redesigned switch before|![](https://codeberg.org/attachments/d05bb17a-7e5f-4356-9840-2682f5b31f8a)|
|After|![](https://codeberg.org/attachments/b62c9373-395c-47a3-a8aa-b6905a22b11a)|

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6544
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-01-13 17:10:43 +00:00 committed by Otto
parent 9a608a034d
commit 03fe21d020
1 changed files with 3 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web_src/css/modules/switch.css
View File

@ -10,8 +10,10 @@
} }
.switch .item { .switch .item {
color: var(--color-text); display: flex;
align-items: center;
padding: .5em 1.125em; padding: .5em 1.125em;
color: var(--color-text);
border-radius: var(--border-radius); border-radius: var(--border-radius);
text-wrap: nowrap; text-wrap: nowrap;
} }
@ -20,7 +22,3 @@
background: var(--color-active); background: var(--color-active);
outline: 1px solid var(--color-input-border); outline: 1px solid var(--color-input-border);
} }
.switch .item svg {
vertical-align: sub;
}