From a11e3220173d2bb05cbb07f668b425661f95e858 Mon Sep 17 00:00:00 2001
From: Tudor <tudor@sitaru.org>
Date: Tue, 24 Mar 2026 09:22:42 +0000
Subject: [PATCH] fix(buttons): force identical height on mixed <a>/<button>
 pairs

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>
---
 nextjs-app/components/RankingsView.module.css | 9 +++++++++
 nextjs-app/components/SchoolCard.module.css   | 8 ++++++++
 nextjs-app/components/SchoolRow.module.css    | 8 ++++++++
 3 files changed, 25 insertions(+)

diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css
index e564e95..6862ead 100644
--- a/nextjs-app/components/RankingsView.module.css
+++ b/nextjs-app/components/RankingsView.module.css
@@ -266,6 +266,15 @@
   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 {
   display: inline-flex;
   align-items: center;
diff --git a/nextjs-app/components/SchoolCard.module.css b/nextjs-app/components/SchoolCard.module.css
index 6c818aa..f3cb21b 100644
--- a/nextjs-app/components/SchoolCard.module.css
+++ b/nextjs-app/components/SchoolCard.module.css
@@ -145,6 +145,14 @@
   gap: 0.5rem;
 }
 
+/* Equalise <a> and <button> rendering */
+.actions > * {
+  height: 2rem;
+  line-height: 1;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
 .btnSecondary,
 .btnPrimary {
   flex: 1;
diff --git a/nextjs-app/components/SchoolRow.module.css b/nextjs-app/components/SchoolRow.module.css
index eadd652..3538a81 100644
--- a/nextjs-app/components/SchoolRow.module.css
+++ b/nextjs-app/components/SchoolRow.module.css
@@ -128,6 +128,14 @@
   flex-shrink: 0;
 }
 
+/* Equalise <a> and <button> rendering */
+.rowActions > * {
+  height: 2rem;
+  line-height: 1;
+  font-family: inherit;
+  box-sizing: border-box;
+}
+
 .btnView {
   display: inline-flex;
   align-items: center;