Force the notice row to be the flex container it always claimed to be
Browse files
distinct_server/presentation.py
CHANGED
|
@@ -411,17 +411,31 @@ footer,.gradio-container footer{display:none !important;}
|
|
| 411 |
floating above the text like a rendering fault. The mark and the sentence
|
| 412 |
are now one non-breaking pair that shrinks together; only the "What is
|
| 413 |
kept" toggle is allowed to drop to its own line. */
|
| 414 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 415 |
flex-wrap:wrap; cursor:pointer; list-style:none;
|
| 416 |
font-size:var(--t-label); color:var(--c-text-2);
|
| 417 |
line-height:1.5;}
|
| 418 |
.c-notice__summary>span:nth-child(2){flex:1 1 180px; min-width:0;}
|
| 419 |
.c-notice__summary::-webkit-details-marker{display:none;}
|
| 420 |
.c-notice__summary strong{color:var(--c-text); font-weight:600;}
|
|
|
|
|
|
|
|
|
|
|
|
|
| 421 |
.c-notice__mark{flex:none; width:16px; height:16px; border-radius:50%;
|
| 422 |
margin-top:2px;
|
| 423 |
border:1.5px solid var(--c-warn-rule); color:var(--c-warn-rule);
|
| 424 |
-
font-size:10px; font-weight:700;
|
|
|
|
| 425 |
.c-notice__toggle{margin-left:auto; white-space:nowrap; font-size:var(--t-micro);
|
| 426 |
color:var(--c-muted); text-decoration:underline;
|
| 427 |
text-underline-offset:2px; padding-left:var(--s3);}
|
|
|
|
| 411 |
floating above the text like a rendering fault. The mark and the sentence
|
| 412 |
are now one non-breaking pair that shrinks together; only the "What is
|
| 413 |
kept" toggle is allowed to drop to its own line. */
|
| 414 |
+
/* `display` IS `!important` HERE, AND THAT IS NOT LAZINESS.
|
| 415 |
+
Gradio ships `.gradio-container-6-24-0 summary{display:list-item}` — an
|
| 416 |
+
element selector inside a version-stamped class, which outranks any single
|
| 417 |
+
class of ours and whose name changes with every release, so it cannot be
|
| 418 |
+
matched or overridden by specificity that survives an upgrade. Until this
|
| 419 |
+
was forced, this rule had simply never applied: the row was never a flex
|
| 420 |
+
container at all. It went unnoticed while the children happened to be
|
| 421 |
+
inline, and became visible the moment the mark was given a box of its own,
|
| 422 |
+
which a non-flex parent then put on a line of its own. */
|
| 423 |
+
.c-notice__summary{display:flex !important; align-items:flex-start; gap:var(--s3);
|
| 424 |
flex-wrap:wrap; cursor:pointer; list-style:none;
|
| 425 |
font-size:var(--t-label); color:var(--c-text-2);
|
| 426 |
line-height:1.5;}
|
| 427 |
.c-notice__summary>span:nth-child(2){flex:1 1 180px; min-width:0;}
|
| 428 |
.c-notice__summary::-webkit-details-marker{display:none;}
|
| 429 |
.c-notice__summary strong{color:var(--c-text); font-weight:600;}
|
| 430 |
+
/* inline-grid, not grid: a block-level box in a row that failed to become a
|
| 431 |
+
flex container takes the whole line to itself, which is exactly how this
|
| 432 |
+
mark ended up stranded above its own sentence. Inline-grid centres the
|
| 433 |
+
glyph just as well and cannot claim a line. */
|
| 434 |
.c-notice__mark{flex:none; width:16px; height:16px; border-radius:50%;
|
| 435 |
margin-top:2px;
|
| 436 |
border:1.5px solid var(--c-warn-rule); color:var(--c-warn-rule);
|
| 437 |
+
font-size:10px; font-weight:700;
|
| 438 |
+
display:inline-grid; place-items:center;}
|
| 439 |
.c-notice__toggle{margin-left:auto; white-space:nowrap; font-size:var(--t-micro);
|
| 440 |
color:var(--c-muted); text-decoration:underline;
|
| 441 |
text-underline-offset:2px; padding-left:var(--s3);}
|