From 03fe21d0201ad92b82a24910b5dd061c1261b55f Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Mon, 13 Jan 2025 17:10:43 +0000 Subject: [PATCH] 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 Reviewed-by: Otto Co-authored-by: 0ko <0ko@noreply.codeberg.org> Co-committed-by: 0ko <0ko@noreply.codeberg.org> --- web_src/css/modules/switch.css | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css index 510b6a4bac..5250274d05 100644 --- a/web_src/css/modules/switch.css +++ b/web_src/css/modules/switch.css @@ -10,8 +10,10 @@ } .switch .item { - color: var(--color-text); + display: flex; + align-items: center; padding: .5em 1.125em; + color: var(--color-text); border-radius: var(--border-radius); text-wrap: nowrap; } @@ -20,7 +22,3 @@ background: var(--color-active); outline: 1px solid var(--color-input-border); } - -.switch .item svg { - vertical-align: sub; -}