golem15/summercms
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): size the switch toggle in pixels at the 14px root

Browse Source 
The admin sets the html font size to 14px, so the rem utilities w-11 and
size-5 shrank the track to 38.5px and the knob to 17.5px against the
fixed 26px height and 18px travel. Use w-[44px] and size-[20px] so the
knob sits in a symmetric 3px inset at both ends. Rebuild the embedded
admin shell.
This commit is contained in:
Jakub Zych
2026-10-07 18:15:41 +02:00
parent a586357a34
commit b040ee3a74
5 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
admin/src/components/form/fields/SwitchField.vue
View File

@@ -34,12 +34,12 @@ function toggle(): void {
:aria-invalid="invalid ? 'true' : undefined"
:aria-describedby="describedBy || undefined"
:class="on ? 'bg-primary' : 'bg-border-strong'"
class="relative h-[26px] w-11 shrink-0 rounded-pill transition-colors duration-150 ease-out"
class="relative h-[26px] w-[44px] shrink-0 rounded-pill transition-colors duration-150 ease-out"
@click="toggle"
>
<span
:class="on ? 'translate-x-[18px] bg-on-primary' : 'translate-x-0 bg-white'"
class="absolute top-[3px] left-[3px] size-5 rounded-full shadow-tab transition-transform duration-150 ease-out"
class="absolute top-[3px] left-[3px] size-[20px] rounded-full shadow-tab transition-transform duration-150 ease-out"
aria-hidden="true"
/>
</button>