From 376b2670643dfae18e75e69ffc2ad6de42ac1f2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Thu, 10 Jul 2025 04:41:57 +0200
Subject: [PATCH] Refactor campaign card layout for improved responsiveness and
 visual consistency

---
 templates/twitch/dashboard.html | 52 ++++++++++++++++++---------------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/templates/twitch/dashboard.html b/templates/twitch/dashboard.html
index 9ad2a47..abdc843 100644
--- a/templates/twitch/dashboard.html
+++ b/templates/twitch/dashboard.html
@@ -21,31 +21,37 @@
                 <div class="row g-3">
                     {% for campaign in active_campaigns %}
                     <div class="col-md-6 col-lg-4 col-xl-3">
-                        <div class="d-flex campaign-card campaign-active border rounded p-2">
-                            <div class="campaign-image me-3">
-                                {% if campaign.image_url %}
-                                <img src="{{ campaign.image_url }}" width="80" height="80" class="rounded"
-                                    alt="{{ campaign.name }}" style="object-fit: cover;">
-                                {% else %}
-                                <div class="bg-light rounded"
-                                    style="width: 80px; height: 80px; display: flex; align-items: center; justify-content: center;">
-                                    <i class="fas fa-image text-muted" style="font-size: 1.5rem;"></i>
+                        <div class="campaign-card campaign-active border rounded p-2">
+                            <div class="d-flex">
+                                <div class="campaign-image flex-shrink-0 me-3">
+                                    {% if campaign.image_url %}
+                                    <img src="{{ campaign.image_url }}" width="70" height="70" class="rounded"
+                                        alt="{{ campaign.name }}" style="object-fit: cover;">
+                                    {% else %}
+                                    <div class="bg-light rounded"
+                                        style="width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;">
+                                        <i class="fas fa-image text-muted" style="font-size: 1.5rem;"></i>
+                                    </div>
+                                    {% endif %}
+                                </div>
+                                <div class="campaign-details min-w-0">
+                                    <div class="title-wrapper" style="min-height: 2.4rem;">
+                                        <h6 class="mb-1" title="{{ campaign.name }}"
+                                            style="display: -webkit-box; display: box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; box-orient: vertical; overflow: hidden; font-size: 0.9rem;">
+                                            {{ campaign.name }}</h6>
+                                    </div>
+                                    <p class="mb-1 small text-muted text-truncate">
+                                        <a href="{% url 'twitch:game_detail' campaign.game.id %}"
+                                            class="text-decoration-none" title="{{ campaign.game.display_name }}">
+                                            <i class="fas fa-gamepad me-1"></i>{{ campaign.game.display_name }}
+                                        </a>
+                                    </p>
                                 </div>
-                                {% endif %}
                             </div>
-                            <div class="campaign-details flex-grow-1">
-                                <h6 class="mb-1 text-truncate" title="{{ campaign.name }}">{{ campaign.name }}</h6>
-                                <p class="mb-1 small text-muted">
-                                    <a href="{% url 'twitch:game_detail' campaign.game.id %}"
-                                        class="text-decoration-none">
-                                        <i class="fas fa-gamepad me-1"></i>{{ campaign.game.display_name }}
-                                    </a>
-                                </p>
-                                <div class="d-flex justify-content-between align-items-center mt-1">
-                                    <span class="badge bg-success">Active</span>
-                                    <a href="{% url 'twitch:campaign_detail' campaign.id %}"
-                                        class="btn btn-sm btn-outline-primary">Details</a>
-                                </div>
+                            <div class="d-flex justify-content-between align-items-center mt-2">
+                                <span class="badge bg-success">Active</span>
+                                <a href="{% url 'twitch:campaign_detail' campaign.id %}"
+                                    class="btn btn-sm btn-outline-primary">Details</a>
                             </div>
                         </div>
                     </div>