Force dropdown height to match the Model textbox
Browse filesReason: previous rule only hit [data-testid="dropdown"], but Gradio 5
also emits .gradio-dropdown with inner .wrap/.wrap-inner wrappers that
set their own small min-height, leaving the control visibly shorter
than the neighbouring textbox. Broaden selectors and pin both the
outer block and inner wrapper to 46/44px.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
app.py
CHANGED
|
@@ -518,39 +518,53 @@ gradio-app > div {
|
|
| 518 |
}
|
| 519 |
|
| 520 |
/* === Dropdown =========================================================== */
|
| 521 |
-
[class*="gradio-container"] [data-testid="dropdown"]
|
|
|
|
| 522 |
background: var(--q-paper) !important;
|
| 523 |
border: 1px solid var(--q-line-strong) !important;
|
| 524 |
border-radius: var(--q-radius-md) !important;
|
| 525 |
box-shadow: none !important;
|
| 526 |
padding: 0 !important;
|
| 527 |
-
min-height:
|
| 528 |
-
display: flex !important;
|
| 529 |
-
align-items: center !important;
|
| 530 |
width: 100% !important;
|
|
|
|
| 531 |
}
|
| 532 |
[class*="gradio-container"] [data-testid="dropdown"] > .wrap,
|
| 533 |
[class*="gradio-container"] [data-testid="dropdown"] .secondary-wrap,
|
| 534 |
[class*="gradio-container"] [data-testid="dropdown"] .wrap-inner,
|
| 535 |
[class*="gradio-container"] [data-testid="dropdown"] .input-container,
|
|
|
|
|
|
|
|
|
|
| 536 |
[class*="gradio-container"] [class*="dropdown"] .wrap {
|
| 537 |
background: transparent !important;
|
| 538 |
border: none !important;
|
| 539 |
box-shadow: none !important;
|
| 540 |
border-radius: 10px !important;
|
| 541 |
width: 100% !important;
|
| 542 |
-
min-height:
|
| 543 |
padding: 0 14px !important;
|
| 544 |
display: flex !important;
|
| 545 |
align-items: center !important;
|
|
|
|
| 546 |
}
|
| 547 |
-
[class*="gradio-container"] [data-testid="dropdown"] input
|
|
|
|
| 548 |
background: transparent !important;
|
| 549 |
border: none !important;
|
| 550 |
box-shadow: none !important;
|
| 551 |
padding: 0 !important;
|
| 552 |
-
height:
|
|
|
|
| 553 |
font-size: 0.95rem !important;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 554 |
}
|
| 555 |
[class*="gradio-container"] .options ul,
|
| 556 |
[class*="gradio-container"] .options {
|
|
|
|
| 518 |
}
|
| 519 |
|
| 520 |
/* === Dropdown =========================================================== */
|
| 521 |
+
[class*="gradio-container"] [data-testid="dropdown"],
|
| 522 |
+
[class*="gradio-container"] .gradio-dropdown {
|
| 523 |
background: var(--q-paper) !important;
|
| 524 |
border: 1px solid var(--q-line-strong) !important;
|
| 525 |
border-radius: var(--q-radius-md) !important;
|
| 526 |
box-shadow: none !important;
|
| 527 |
padding: 0 !important;
|
| 528 |
+
min-height: 46px !important;
|
|
|
|
|
|
|
| 529 |
width: 100% !important;
|
| 530 |
+
box-sizing: border-box !important;
|
| 531 |
}
|
| 532 |
[class*="gradio-container"] [data-testid="dropdown"] > .wrap,
|
| 533 |
[class*="gradio-container"] [data-testid="dropdown"] .secondary-wrap,
|
| 534 |
[class*="gradio-container"] [data-testid="dropdown"] .wrap-inner,
|
| 535 |
[class*="gradio-container"] [data-testid="dropdown"] .input-container,
|
| 536 |
+
[class*="gradio-container"] .gradio-dropdown .wrap,
|
| 537 |
+
[class*="gradio-container"] .gradio-dropdown .wrap-inner,
|
| 538 |
+
[class*="gradio-container"] .gradio-dropdown .secondary-wrap,
|
| 539 |
[class*="gradio-container"] [class*="dropdown"] .wrap {
|
| 540 |
background: transparent !important;
|
| 541 |
border: none !important;
|
| 542 |
box-shadow: none !important;
|
| 543 |
border-radius: 10px !important;
|
| 544 |
width: 100% !important;
|
| 545 |
+
min-height: 44px !important;
|
| 546 |
padding: 0 14px !important;
|
| 547 |
display: flex !important;
|
| 548 |
align-items: center !important;
|
| 549 |
+
box-sizing: border-box !important;
|
| 550 |
}
|
| 551 |
+
[class*="gradio-container"] [data-testid="dropdown"] input,
|
| 552 |
+
[class*="gradio-container"] .gradio-dropdown input {
|
| 553 |
background: transparent !important;
|
| 554 |
border: none !important;
|
| 555 |
box-shadow: none !important;
|
| 556 |
padding: 0 !important;
|
| 557 |
+
height: 44px !important;
|
| 558 |
+
line-height: 44px !important;
|
| 559 |
font-size: 0.95rem !important;
|
| 560 |
+
width: 100% !important;
|
| 561 |
+
}
|
| 562 |
+
/* The little caret/arrow icon container — vertically center it */
|
| 563 |
+
[class*="gradio-container"] [data-testid="dropdown"] .icon-wrap,
|
| 564 |
+
[class*="gradio-container"] .gradio-dropdown .icon-wrap {
|
| 565 |
+
top: 50% !important;
|
| 566 |
+
transform: translateY(-50%) !important;
|
| 567 |
+
right: 14px !important;
|
| 568 |
}
|
| 569 |
[class*="gradio-container"] .options ul,
|
| 570 |
[class*="gradio-container"] .options {
|