From 76f64b83ea9b677ede796e57afa8de03b590c82e Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Fri, 11 Jul 2025 13:00:23 +0200
Subject: [PATCH] Make sure service cards have consistent height

---
 .../frontend/organizations/services.html       |  6 +++---
 src/servala/static/css/servala.css             | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/servala/frontend/templates/frontend/organizations/services.html b/src/servala/frontend/templates/frontend/organizations/services.html
index 022b6e5..cc1ecc4 100644
--- a/src/servala/frontend/templates/frontend/organizations/services.html
+++ b/src/servala/frontend/templates/frontend/organizations/services.html
@@ -16,10 +16,10 @@
                 </div>
             </div>
         </div>
-        <div class="row">
+        <div class="row service-cards-container">
             {% for service in services %}
                 <div class="col-6 col-lg-3 col-md-4">
-                    <div class="card">
+                    <div class="card h-100 d-flex flex-column">
                         <div class="card-header d-flex align-items-center">
                             {% if service.logo %}
                                 <img src="{{ service.logo.url }}"
@@ -33,7 +33,7 @@
                                 <small class="text-muted">{{ service.category }}</small>
                             </div>
                         </div>
-                        <div class="card-body">
+                        <div class="card-body flex-grow-1">
                             {% if service.description %}<p class="card-text">{{ service.description|urlize }}</p>{% endif %}
                         </div>
                         <div class="card-footer d-flex justify-content-between">
diff --git a/src/servala/static/css/servala.css b/src/servala/static/css/servala.css
index db9052a..ee4c080 100644
--- a/src/servala/static/css/servala.css
+++ b/src/servala/static/css/servala.css
@@ -174,3 +174,21 @@ a.btn-keycloak {
     margin-top: -16px;
     padding-right: 28px;
 }
+
+/* Service cards equal height styling */
+.service-cards-container .card {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.service-cards-container .card-body {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.service-cards-container .card-footer {
+    margin-top: auto;
+}