From 87e700604c5b3649fc6cee7ecc2f776fa2110f83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Fri, 29 Aug 2025 18:38:49 +0200
Subject: [PATCH] Improve dashboard layout

---
 templates/twitch/dashboard.html | 69 +++++++++++++++++----------------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/templates/twitch/dashboard.html b/templates/twitch/dashboard.html
index 405bb29..05a046f 100644
--- a/templates/twitch/dashboard.html
+++ b/templates/twitch/dashboard.html
@@ -19,46 +19,49 @@
                     </h2>
                     {% for game_id, game_data in org_data.games.items %}
                         <article>
-                            <header style="display: flex; align-items: flex-start; margin-bottom: 1rem;">
-                                <div style="flex-shrink: 0; margin-right: 1rem;">
+                            <header style="margin-bottom: 1rem;">
+                                <h3 style="margin: 0 0 0.5rem 0;">
+                                    <a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
+                                </h3>
+                            </header>
+                            <div style="display: flex; gap: 1rem;">
+                                <div style="flex-shrink: 0;">
                                     <img src="{{ game_data.box_art }}"
                                          alt="Box art for {{ game_data.name }}"
                                          width="200"
                                          height="267"
                                          style="border-radius: 8px">
                                 </div>
-                                <div style="flex: 1;">
-                                    <h3 style="margin: 0 0 0.5rem 0;">
-                                        <a href="{% url 'twitch:game_detail' game_id %}">{{ game_data.name }}</a>
-                                    </h3>
+                                <div style="flex: 1; overflow-x: auto;">
+                                    <div style="display: flex; gap: 1rem; min-width: max-content;">
+                                        {% for campaign in game_data.campaigns %}
+                                            <article style="display: flex;
+                                                            flex-direction: column;
+                                                            align-items: center;
+                                                            padding: 0.5rem;
+                                                            flex-shrink: 0">
+                                                <div>
+                                                    <a href="{% url 'twitch:campaign_detail' campaign.id %}">
+                                                        <img src="{{ campaign.image_url }}"
+                                                             alt="Image for {{ campaign.name }}"
+                                                             width="120"
+                                                             height="120"
+                                                             style="border-radius: 4px">
+                                                        <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign.clean_name }}</h4>
+                                                    </a>
+                                                    <time datetime="{{ campaign.end_at|date:'c' }}"
+                                                          title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}"
+                                                          style="font-size: 0.9rem;
+                                                                 color: #666;
+                                                                 display: block;
+                                                                 text-align: left">
+                                                        Ends in {{ campaign.end_at|timeuntil }}
+                                                    </time>
+                                                </div>
+                                            </article>
+                                        {% endfor %}
+                                    </div>
                                 </div>
-                            </header>
-                            <div>
-                                {% for campaign in game_data.campaigns %}
-                                    <article style="display: flex;
-                                                    align-items: center;
-                                                    margin-bottom: 1rem;
-                                                    padding: 0.5rem;
-                                                    border: 1px solid #ddd;
-                                                    border-radius: 8px">
-                                        <div style="flex: 1;">
-                                            <a href="{% url 'twitch:campaign_detail' campaign.id %}">
-                                                <img src="{{ campaign.image_url }}"
-                                                     alt="Image for {{ campaign.name }}"
-                                                     width="120"
-                                                     height="120"
-                                                     style="border-radius: 4px">
-                                                <h4 style="margin: 0.5rem 0;">{{ campaign.clean_name }}</h4>
-                                            </a>
-                                            <time datetime="{{ campaign.end_at|date:'c' }}"
-                                                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}"
-                                                  style="font-size: 0.9rem;
-                                                         color: #666">
-                                                Ends in {{ campaign.end_at|timeuntil }}
-                                            </time>
-                                        </div>
-                                    </article>
-                                {% endfor %}
                             </div>
                         </article>
                     {% endfor %}