Spaces:
Running on Zero
Running on Zero
Stop the radio fieldset clipping the first pill's left border
Browse filesGradio'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>
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;
|