fix(buttons): force identical height on mixed <a>/<button> pairs
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 33s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m7s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 0s

Set explicit height:2rem, line-height:1, font-family:inherit on all children
of button group containers. Browsers apply different default line-height and
font-family to <button> vs <a>, causing height differences that persist even
with identical padding and display:inline-flex.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-24 09:22:42 +00:00
parent 8b193c830e
commit a11e322017
3 changed files with 25 additions and 0 deletions

View File

@@ -266,6 +266,15 @@
text-align: center; text-align: center;
} }
/* Equalise <a> and <button> rendering */
.actionCell > * {
height: 2rem;
line-height: 1;
font-family: inherit;
box-sizing: border-box;
vertical-align: middle;
}
.addButton { .addButton {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;

View File

@@ -145,6 +145,14 @@
gap: 0.5rem; gap: 0.5rem;
} }
/* Equalise <a> and <button> rendering */
.actions > * {
height: 2rem;
line-height: 1;
font-family: inherit;
box-sizing: border-box;
}
.btnSecondary, .btnSecondary,
.btnPrimary { .btnPrimary {
flex: 1; flex: 1;

View File

@@ -128,6 +128,14 @@
flex-shrink: 0; flex-shrink: 0;
} }
/* Equalise <a> and <button> rendering */
.rowActions > * {
height: 2rem;
line-height: 1;
font-family: inherit;
box-sizing: border-box;
}
.btnView { .btnView {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;