Fix control panel dropdown text clipping at the bottom of the field

.select's content box (2.125rem height minus padding and border) left
only ~16px for a 14px line -- descenders (g/y/p/q) rendered clipped in
some browsers, most visibly on the Competition edit modal's Sport
dropdown. Bumped .input/.select to 2.25rem for headroom, and .btn/
.btn-square the same amount so a button next to a field in the same
row still lines up -- .btn itself never had the clipping problem
(flex centring), this is purely for row alignment.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01ECGMEwrc2k4D8VQuwjstj9

assets/controlpanel.css

@@ -288,7 +288,10 @@
         align-items: center;
         justify-content: center;
         gap: 0.5rem;
-        height: 2.125rem;
+        /* Matches .input/.select's own 2.25rem -- see that rule's comment; .btn itself
+           never had the clipping problem (flex centring), this is purely so a button
+           sitting next to a field in the same row lines up. */
+        height: 2.25rem;
         padding-inline: 0.875rem;
         border-radius: var(--radius-box);
         font-family: var(--font-display);
@@ -414,7 +417,7 @@
 
     .btn-square {
         padding-inline: 0;
-        width: 2.125rem;
+        width: 2.25rem;
     }
 
     .btn-sm {
@@ -694,10 +697,17 @@
        space for its native dropdown arrow and several browsers give it a different default
        line-height than a text <input>, so the same padding alone does not guarantee the
        same rendered height. appearance: none plus a hand-drawn arrow replaces the native
-       one, since that reserved space was part of what caused the mismatch. */
+       one, since that reserved space was part of what caused the mismatch.
+
+       2.25rem, not 2.125rem: at the tighter height, a <select>'s own vertical text
+       centring (unlike .btn's flex centring below, a <select> isn't a flex container)
+       left only ~16px of content box for a 14px line -- descenders (g/y/p/q) rendered
+       clipped at the bottom in some browsers. .btn is bumped the same amount purely
+       for row alignment (a filter bar mixing buttons and inputs) -- flex centring
+       itself was never the problem. */
     .input,
     .select {
-        height: 2.125rem;
+        height: 2.25rem;
     }
 
     .select {

static/css/app.css

@@ -5129,6 +5129,10 @@
     --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-xl\/shadow {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);

static/css/controlpanel.css

@@ -2114,7 +2114,7 @@
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
-    height: 2.125rem;
+    height: 2.25rem;
     padding-inline: 0.875rem;
     border-radius: var(--radius-box);
     font-family: var(--font-display);
@@ -2217,7 +2217,7 @@
   }
   .btn-square {
     padding-inline: 0;
-    width: 2.125rem;
+    width: 2.25rem;
   }
   .btn-sm {
     height: 1.75rem;
@@ -2435,7 +2435,7 @@
     padding: 0.5rem 0.75rem;
   }
   .input, .select {
-    height: 2.125rem;
+    height: 2.25rem;
   }
   .select {
     padding-right: 2rem;