forked from farhoodlabs/paperclip
Fix oversized toggle switches on mobile
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:
@@ -1513,6 +1513,7 @@ function ConfigurationTab({
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
data-slot="toggle"
|
||||
aria-checked={canCreateAgents}
|
||||
className={cn(
|
||||
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
@@ -1544,6 +1545,7 @@ function ConfigurationTab({
|
||||
<button
|
||||
type="button"
|
||||
role="switch"
|
||||
data-slot="toggle"
|
||||
aria-checked={canAssignTasks}
|
||||
className={cn(
|
||||
"relative inline-flex h-5 w-9 items-center rounded-full transition-colors shrink-0 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
|
||||
@@ -84,6 +84,7 @@ export function InstanceExperimentalSettings() {
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-slot="toggle"
|
||||
aria-label="Toggle isolated workspaces experimental setting"
|
||||
disabled={toggleMutation.isPending}
|
||||
className={cn(
|
||||
@@ -113,6 +114,7 @@ export function InstanceExperimentalSettings() {
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-slot="toggle"
|
||||
aria-label="Toggle guarded dev-server auto-restart"
|
||||
disabled={toggleMutation.isPending}
|
||||
className={cn(
|
||||
|
||||
@@ -81,6 +81,7 @@ export function InstanceGeneralSettings() {
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
data-slot="toggle"
|
||||
aria-label="Toggle username log censoring"
|
||||
disabled={toggleMutation.isPending}
|
||||
className={cn(
|
||||
|
||||
Reference in New Issue
Block a user