From efc5fefeb408a955fa4fe2eb22349c761d914b0c Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Wed, 26 Feb 2025 10:35:48 +0100
Subject: [PATCH] some styling improvements to list views

---
 hub/services/static/css/servala-main.css           | 12 +++++++++---
 hub/services/templates/services/provider_list.html | 10 +++++-----
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/hub/services/static/css/servala-main.css b/hub/services/static/css/servala-main.css
index 60b13e8..5cb38e8 100644
--- a/hub/services/static/css/servala-main.css
+++ b/hub/services/static/css/servala-main.css
@@ -12071,9 +12071,15 @@ a.btn:focus {
 }
 
 .card__image {
-    width: 80px;
-    height: 80px;
-    margin-bottom: 16px
+    height: 120px;
+    display: flex;
+    overflow: hidden;
+}
+
+.card__image img {
+    max-height: 90px;
+    max-width: 80%;
+    object-fit: contain;
 }
 
 .card__image__wide {
diff --git a/hub/services/templates/services/provider_list.html b/hub/services/templates/services/provider_list.html
index dbd78dd..bf3bc12 100644
--- a/hub/services/templates/services/provider_list.html
+++ b/hub/services/templates/services/provider_list.html
@@ -89,19 +89,19 @@
                         <div class="card h-100 d-flex flex-column">
                             <div class="card__content d-flex flex-column flex-grow-1">
                                 <div class="card__header">
-                                    <div class="d-flex align-items-start mb-3">
-                                        <div class="me-3">
+                                    <div class="d-flex align-items-start" style="height: 100px; margin-bottom: 1rem;">
+                                        <div class="me-3 d-flex align-items-center" style="height: 100%;">
                                             <a href="{{ provider.get_absolute_url }}">
                                             <img src="{{ provider.logo.url }}" 
                                                     alt="{{ provider.name }}" 
-                                                    style="max-height: 70px; max-width: 200px; object-fit: contain;">
+                                                    style="max-height: 180px; max-width: 250px; object-fit: contain;">
                                                 </a>
                                         </div>
                                     </div>
                                 </div>
 
-                                <div class="card__desc flex-grow-1 rich-text-content">
-                                    {{ provider.description|safe|truncatewords_html:100 }}
+                                <div class="card__desc rich-text-content" style="align-self: flex-start;">
+                                    {{ provider.description|safe|truncatewords_html:50 }}
                                 </div>
 
                                 <div class="card__footer mt-3">