fix(buttons): use inline-flex on all buttons so <a> and <button> render same height
All checks were successful
Build and Push Docker Images / Build Backend (FastAPI) (push) Successful in 32s
Build and Push Docker Images / Build Frontend (Next.js) (push) Successful in 1m7s
Build and Push Docker Images / Trigger Portainer Update (push) Successful in 1s

<a> tags are display:inline by default and don't respect vertical padding,
while <button> is inline-block. Mixed anchor/button pairs (View/Add) rendered
at different heights despite identical padding. Apply display:inline-flex +
align-items:center to every button-styled element across SchoolRow, RankingsView,
and SchoolCard. Add border:1px solid transparent to borderless buttons so total
box size matches bordered siblings.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-24 09:15:33 +00:00
parent b3892c1629
commit 8b193c830e
3 changed files with 26 additions and 6 deletions

View File

@@ -129,6 +129,8 @@
}
.btnView {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
@@ -138,6 +140,7 @@
text-decoration: none;
transition: all 0.15s ease;
white-space: nowrap;
box-sizing: border-box;
}
.btnView:hover {
@@ -147,16 +150,19 @@
}
.btnCompare {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 600;
color: white;
background: var(--accent-coral, #e07256);
border: none;
border: 1px solid transparent;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
white-space: nowrap;
box-sizing: border-box;
}
.btnCompare:hover {
@@ -164,6 +170,8 @@
}
.btnRemove {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
@@ -174,6 +182,7 @@
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
box-sizing: border-box;
}
.btnRemove:hover {