From 869d1cec852c3a2427e490b50ea6aa8d02a01e19 Mon Sep 17 00:00:00 2001
From: Tobias Kunze <r@rixx.de>
Date: Thu, 11 Sep 2025 13:16:12 +0200
Subject: [PATCH] Make card list layout consistent

---
 .../service_instance_detail.html              |  2 +-
 .../frontend/organizations/services.html      | 44 ++++++++++---------
 src/servala/static/css/servala.css            | 18 +++-----
 3 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html b/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
index a12efcf..148ecbb 100644
--- a/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
+++ b/src/servala/frontend/templates/frontend/organizations/service_instance_detail.html
@@ -22,7 +22,7 @@
 {% endblock page_title_extra %}
 {% block content %}
     <section class="section">
-        <div class="row">
+        <div class="row match-height mb-5">
             <div class="col-12 col-md-5">
                 <div class="card">
                     <div class="card-header">
diff --git a/src/servala/frontend/templates/frontend/organizations/services.html b/src/servala/frontend/templates/frontend/organizations/services.html
index 2227e86..673f844 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 service-cards-container mb-5">
+        <div class="row match-height service-cards-container mb-5">
             {% for service in services %}
-                <div class="col-6 col-lg-3 col-md-4">
-                    <div class="card h-100 d-flex flex-column">
+                <div class="col-12 col-md-6 col-lg-3">
+                    <div class="card">
                         <div class="card-header d-flex align-items-center">
                             {% if service.logo %}
                                 <img src="{{ service.logo.url }}"
@@ -33,31 +33,35 @@
                                 <small class="text-muted">{{ service.category }}</small>
                             </div>
                         </div>
-                        <div class="card-body flex-grow-1">
-                            {% if service.description %}<p class="card-text">{{ service.description|urlize }}</p>{% endif %}
+                        <div class="card-content">
+                            <div class="card-body flex-grow-1">
+                                {% if service.description %}<p class="card-text">{{ service.description|urlize }}</p>{% endif %}
+                            </div>
                         </div>
-                        <div class="card-footer d-flex justify-content-between align-items-center gap-2">
-                            {% if service.featured_links %}
-                                {% with featured_link=service.featured_links.0 %}
-                                    <a href="{{ featured_link.url }}"
-                                       target="_blank"
-                                       rel="noopener noreferrer"
-                                       class="btn btn-outline-primary">
-                                        {{ featured_link.title }}
-                                        <i class="bi bi-box-arrow-up-right ms-1"></i>
-                                    </a>
-                                {% endwith %}
-                            {% else %}
-                                <span></span>
-                            {% endif %}
-                            <a href="{{ service.slug }}/" class="btn btn-light-primary">{% translate "View Availability" %}</a>
+                            <div class="card-footer d-flex justify-content-between align-items-center gap-2">
+                                {% if service.featured_links %}
+                                    {% with featured_link=service.featured_links.0 %}
+                                        <a href="{{ featured_link.url }}"
+                                           target="_blank"
+                                           rel="noopener noreferrer"
+                                           class="btn btn-outline-primary">
+                                            {{ featured_link.title }}
+                                            <i class="bi bi-box-arrow-up-right ms-1"></i>
+                                        </a>
+                                    {% endwith %}
+                                {% else %}
+                                    <span></span>
+                                {% endif %}
+                                <a href="{{ service.slug }}/" class="btn btn-light-primary">{% translate "View Availability" %}</a>
                         </div>
                     </div>
                 </div>
             {% empty %}
                 <div class="card">
                     <div class="card-body">
+                        <div class="card-content">
                         <p>{% translate "No services found." %}</p>
+                        </div>
                     </div>
                 </div>
             {% endfor %}
diff --git a/src/servala/static/css/servala.css b/src/servala/static/css/servala.css
index 2390b97..4b905a5 100644
--- a/src/servala/static/css/servala.css
+++ b/src/servala/static/css/servala.css
@@ -176,21 +176,15 @@ a.btn-keycloak {
 }
 
 /* Service cards equal height styling */
+.service-cards-container > * {
+    display: flex;
+    align-items: stretch;
+}
 .service-cards-container .card {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
+    width: 100%;
 }
-
-.service-cards-container .card-body {
+.service-cards-container .card-content {
     flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-}
-
-.service-cards-container .card-footer {
-    margin-top: auto;
 }
 
 /* CRD Form mandatory field styling */