From 30c7a0b94787123afc80906b4040f2c73a44d6e9 Mon Sep 17 00:00:00 2001 From: 0ko <0ko@noreply.codeberg.org> Date: Mon, 13 Jan 2025 17:28:36 +0000 Subject: [PATCH] Make switch larger on touchscreen devices (#6546) Followup to https://codeberg.org/forgejo/forgejo/pulls/6459. Usually it's quite hard to have inputs with balanced size that works for both desktop and mobile: it's either too large or too small for one of them. I think this can be a solution for this new element. I tried it locally, it feels good on a phone. There's likely one downside which is that the switch will still be larger on touch devices even when they're wide, like on tablets. I think it can be resolved separately at some point. It isn't a problem on small devices because usually these elements go on separate rows. ## Preview This change only affects touch devices. |Before|After| |-|-| |![](/attachments/75311c3f-2e19-4b03-9596-7f78c78f0a70)|![](/attachments/74f987af-57c1-417d-89ed-f96666cb9bad)| Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6546 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 | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web_src/css/modules/switch.css b/web_src/css/modules/switch.css index 265c2ed45a..a9499a84aa 100644 --- a/web_src/css/modules/switch.css +++ b/web_src/css/modules/switch.css @@ -23,8 +23,10 @@ outline: 1px solid var(--color-input-border); } -.switch .item svg { - vertical-align: sub; +@media (pointer: coarse) { + .switch .item { + padding: .75em 1.125em; + } } .switch button.item {