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

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;