TomLii Claude Sonnet 4.6 commited on
Commit
3dd5ddd
·
1 Parent(s): 20cc82e

Force dropdown height to match the Model textbox

Browse files

Reason: 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>

Files changed (1) hide show
  1. app.py +21 -7
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: 44px !important;
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: 42px !important;
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: 42px !important;
 
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 {