diff --git a/assets/controlpanel.css b/assets/controlpanel.css index c5c98c2..72e3120 100644 --- a/assets/controlpanel.css +++ b/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 , 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 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 { diff --git a/static/css/app.css b/static/css/app.css index 07021d2..c362606 100644 --- a/static/css/app.css +++ b/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); diff --git a/static/css/controlpanel.css b/static/css/controlpanel.css index f402efd..af1e0bf 100644 --- a/static/css/controlpanel.css +++ b/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;