Skip to content

Commit e8132da

Browse files
committed
Prevent checkbox / radio button icon from being clipped when label is long
When a checkbox or radio button had a label that filled the entire available width, the icon would begin to shrink and would be clipped. The icon had a preferred size set, but not a minimum size. Set the minimum size to match the SVG, which means 16px. Part of a fix for hypothesis/h#9635.
1 parent d62a57c commit e8132da

1 file changed

Lines changed: 3 additions & 0 deletions

File tree

src/components/input/ToggleInput.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,10 @@ export default function ToggleInput({
9191
// The ring needs to be applied here because the `input` has an
9292
// effectively-0 opacity.
9393
'peer-focus-visible:ring',
94+
// Set preferred size of icon to match text.
9495
'w-em h-em',
96+
// Set minimum size of icon to minimum size of SVG.
97+
'min-w-min min-h-min',
9598
)}
9699
/>
97100
{children}

0 commit comments

Comments
 (0)