zephyrie Claude Opus 4.7 commited on
Commit
2f5e4d9
·
1 Parent(s): bc46cdb

Stop the radio fieldset clipping the first pill's left border

Browse files

Gradio's radio/checkbox <fieldset> computes overflow:auto, which clips
the first pill's 1px left border where it sits flush at the fieldset
edge. Visible in light mode (real border contrast — most obvious on the
selected W/L preset's bold green outline); invisible in dark where the
border is near-transparent.

Set the .preset-row and .controls pill fieldsets to overflow:visible so
the full outline renders. Verified the Soft Tissue pill shows a complete
border in light, and overflow is visible in both themes.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Files changed (1) hide show
  1. app.py +5 -0
app.py CHANGED
@@ -1291,6 +1291,11 @@ body [role="option"][aria-selected="true"] {
1291
  .preset-row input[type="radio"] { display: none; }
1292
  /* kill Gradio's ml-2 utility so W/L preset text is centered in its pill */
1293
  .preset-row label > span { margin: 0 !important; }
 
 
 
 
 
1294
  .preset-row label:has(input:checked) {
1295
  background: color-mix(in srgb, var(--green) 14%, transparent) !important;
1296
  border-color: var(--green) !important;
 
1291
  .preset-row input[type="radio"] { display: none; }
1292
  /* kill Gradio's ml-2 utility so W/L preset text is centered in its pill */
1293
  .preset-row label > span { margin: 0 !important; }
1294
+ /* Gradio's radio/checkbox <fieldset> defaults to overflow:auto, which clips
1295
+ the first pill's 1px left border where it sits flush at the fieldset edge
1296
+ (only noticeable in light mode, where the border has real contrast). */
1297
+ .preset-row fieldset,
1298
+ .controls fieldset { overflow: visible !important; }
1299
  .preset-row label:has(input:checked) {
1300
  background: color-mix(in srgb, var(--green) 14%, transparent) !important;
1301
  border-color: var(--green) !important;