ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-15 10:30:37 +09:00
Code Issues Projects Releases Packages Wiki Activity

Fix oversized toggle switches on mobile

Browse source 
The global @media (pointer: coarse) rule was forcing min-height: 44px on
toggle button elements, inflating them from 20px to 44px. Added
data-slot="toggle" to all 10 toggle buttons and a CSS override to reset
their min-height, keeping the parent row as the touch target.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-03-22 06:35:32 -05:00
parent bd0b76072b
commit 42c8d9b660
7 changed files with 14 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ui/src/components/ProjectProperties.tsx
View file

@ -887,6 +887,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
</div>
{onUpdate || onFieldUpdate ? (
<button
data-slot="toggle"
className={cn(
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
executionWorkspacesEnabled ? "bg-green-600" : "bg-muted",
@ -925,6 +926,7 @@ export function ProjectProperties({ project, onUpdate, onFieldUpdate, getFieldSa
</div>
</div>
<button
data-slot="toggle"
className={cn(
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
executionWorkspaceDefaultMode === "isolated_workspace" ? "bg-green-600" : "bg-muted",