From 408514d0c2257fb83ac1ab3f0cc82ffe2d2223ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Sat, 30 Aug 2025 00:19:45 +0200
Subject: [PATCH] Refactor game list layout for improved organization and
 visual consistency

---
 templates/twitch/game_list.html | 45 +++++++++++++++++----------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/templates/twitch/game_list.html b/templates/twitch/game_list.html
index 95607c8..b05992d 100644
--- a/templates/twitch/game_list.html
+++ b/templates/twitch/game_list.html
@@ -5,50 +5,51 @@
 {% block content %}
     <main>
         <header>
-            <h1>Games</h1>
+            <h1>All Games</h1>
             <p>Browse all available games</p>
         </header>
         {% if games_by_org %}
-            {% for organization, games in games_by_org.items %}
-                <section style="margin-bottom: 3rem;">
-                    <h2 style="margin-bottom: 1rem;">{{ organization.name }}</h2>
-                    <div style="display: flex; flex-direction: column; gap: 1rem;">
+            <section>
+                <div style="display: flex; flex-wrap: wrap; gap: 0.25rem;">
+                    {% for organization, games in games_by_org.items %}
                         {% for item in games %}
-                            <article style="display: flex; gap: 1rem; align-items: center;">
-                                <div style="flex-shrink: 0;">
+                            <article style="padding: 0.25rem;
+                                            border-radius: 8px;
+                                            flex: 1 1 160px;
+                                            text-align: center">
+                                <div style="margin-bottom: 0.25rem;">
                                     {% if item.game.box_art_base_url %}
                                         <img src="{{ item.game.box_art_base_url }}"
                                              alt="Box art for {{ item.game.display_name }}"
-                                             width="120"
-                                             height="160"
+                                             width="180"
+                                             height="240"
                                              style="border-radius: 8px">
                                     {% else %}
-                                        <div style="width: 120px;
-                                                    height: 160px;
+                                        <div style="width: 180px;
+                                                    height: 240px;
                                                     border: 1px solid;
                                                     border-radius: 8px;
                                                     display: flex;
                                                     align-items: center;
                                                     justify-content: center;
-                                                    font-size: 1rem">
+                                                    font-size: 0.8rem;
+                                                    margin: 0 auto">
                                             🎮
                                             <br>
                                             No Image
                                         </div>
                                     {% endif %}
                                 </div>
-                                <div style="flex: 1;">
-                                    <h3 style="margin: 0;">
-                                        <a href="{% url 'twitch:game_detail' item.game.id %}"
-                                           style="text-decoration: none;
-                                                  color: inherit">{{ item.game.display_name }}</a>
-                                    </h3>
-                                </div>
+                                <h4 style="margin: 0;">
+                                    <a href="{% url 'twitch:game_detail' item.game.id %}"
+                                       style="text-decoration: none;
+                                              color: inherit">{{ item.game.display_name }}</a>
+                                </h4>
                             </article>
                         {% endfor %}
-                    </div>
-                </section>
-            {% endfor %}
+                    {% endfor %}
+                </div>
+            </section>
         {% else %}
             <section style="text-align: center; padding: 3rem 1rem;">
                 <div style="font-size: 4rem; margin-bottom: 1rem;">🎮</div>