bernard/RosterChief
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
.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
This commit is contained in:
Bernard Siebens
2026-08-20 22:47:35 +02:00
parent d2eced9a50
commit 7ab7ac1982
3 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
assets/controlpanel.css
View File

@@ -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 {

4
static/css/app.css
View File

@@ -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);

6
static/css/controlpanel.css
View File

@@ -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;