From 31ced8869a1f11e2a346ee01cbbddb6eafc3382a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Hells=C3=A9n?= <tlovinator@gmail.com>
Date: Thu, 23 Jul 2026 21:56:06 +0200
Subject: [PATCH] Unify template layout

---
 templates/base.html                           |   4 +
 templates/chzzk/campaign_detail.html          |   2 +-
 templates/core/dashboard.html                 |  20 +-
 templates/core/debug.html                     |  45 +++-
 templates/kick/campaign_detail.html           |  37 ++--
 templates/kick/category_detail.html           |   1 -
 templates/kick/dashboard.html                 | 196 ++++++------------
 templates/kick/organization_detail.html       |   3 +-
 templates/twitch/campaign_detail.html         |  79 +++----
 templates/twitch/channel_detail.html          |  13 +-
 templates/twitch/dashboard.html               |  35 ++--
 templates/twitch/game_detail.html             |  19 +-
 templates/twitch/games_grid.html              |   4 +-
 .../twitch/includes/reward_campaign_card.html | 111 +++++-----
 templates/twitch/organization_detail.html     |   1 -
 templates/twitch/reward_campaign_detail.html  |  12 +-
 twitch/models.py                              |  21 +-
 17 files changed, 291 insertions(+), 312 deletions(-)

diff --git a/templates/base.html b/templates/base.html
index 0f1bbaa..1a47bd9 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -199,6 +199,10 @@
                 margin-right: 4px;
                 border-radius: 2px;
             }
+
+            dd {
+                margin-left: 0;
+            }
         </style>
     </head>
     <body>
diff --git a/templates/chzzk/campaign_detail.html b/templates/chzzk/campaign_detail.html
index 7a5d8e7..4d1aa4b 100644
--- a/templates/chzzk/campaign_detail.html
+++ b/templates/chzzk/campaign_detail.html
@@ -38,7 +38,7 @@
             </div>
             <!-- Campaign description -->
             <p>{{ campaign.description|linebreaksbr }}</p>
-            <dl>
+            <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                 <dt>Published</dt>
                 <dd>
                     {% if campaign.scraped_at %}
diff --git a/templates/core/dashboard.html b/templates/core/dashboard.html
index 1e62548..2a7185d 100644
--- a/templates/core/dashboard.html
+++ b/templates/core/dashboard.html
@@ -168,15 +168,11 @@
                                                 </div>
                                                 <div style="font-size: 0.85rem; margin-top: 0.1rem;">
                                                     {% if campaign_data.allowed_channels %}
-                                                        <a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}#allowed-channels"
-                                                           style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
-                                                                  text-decoration: none">
-                                                            {% if campaign_data.allowed_channels %}{{ campaign_data.allowed_channels|length }} channel{{ campaign_data.allowed_channels|length|pluralize }}{% endif %}
+                                                        <a href="{% url 'twitch:campaign_detail' campaign_data.campaign.twitch_id %}#allowed-channels">
+                                                            {{ campaign_data.allowed_channels|length }} channel{{ campaign_data.allowed_channels|length|pluralize }}
                                                         </a>
                                                     {% else %}
-                                                        <a href="{{ campaign_data.campaign.game.twitch_directory_url }}"
-                                                           style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
-                                                                  text-decoration: none">Category-wide</a>
+                                                        <a href="{{ campaign_data.campaign.game.twitch_directory_url }}">Category-wide</a>
                                                     {% endif %}
                                                 </div>
                                             </div>
@@ -489,15 +485,11 @@
                                                         </div>
                                                         <div style="font-size: 0.85rem; margin-top: 0.1rem;">
                                                             {% if campaign_data.channels %}
-                                                                <a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}#allowed-channels"
-                                                                   style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
-                                                                          text-decoration: none">
-                                                                    {% if campaign_data.channels %}{{ campaign_data.channels|length }} channel{{ campaign_data.channels|length|pluralize }}{% endif %}
+                                                                <a href="{% url 'kick:campaign_detail' campaign_data.campaign.kick_id %}#allowed-channels">
+                                                                    {{ campaign_data.channels|length }} channel{{ campaign_data.channels|length|pluralize }}
                                                                 </a>
                                                             {% else %}
-                                                                <a href="{{ campaign_data.campaign.url }}"
-                                                                   style="color: color-mix(in srgb, CanvasText 60%, transparent 40%);
-                                                                          text-decoration: none">Category-wide</a>
+                                                                <a href="{{ campaign_data.campaign.url }}">Category-wide</a>
                                                             {% endif %}
                                                         </div>
                                                     </div>
diff --git a/templates/core/debug.html b/templates/core/debug.html
index 924c085..2d2e080 100644
--- a/templates/core/debug.html
+++ b/templates/core/debug.html
@@ -119,7 +119,20 @@
                     <li>
                         <a href="{% url 'twitch:campaign_detail' c.twitch_id %}">{{ c.name }}</a>
                         (Game: <a href="{% url 'twitch:game_detail' c.game.twitch_id %}">{{ c.game.display_name }}</a>)
-                        - Start: {{ c.start_at|default:'(none)' }} / End: {{ c.end_at|default:'(none)' }}
+                        -
+                        Start:
+                        {% if c.start_at %}
+                            <time datetime="{{ c.start_at|date:'c' }}">{{ c.start_at|date:'M d, Y H:i' }}</time>
+                        {% else %}
+                            (none)
+                        {% endif %}
+                        /
+                        End:
+                        {% if c.end_at %}
+                            <time datetime="{{ c.end_at|date:'c' }}">{{ c.end_at|date:'M d, Y H:i' }}</time>
+                        {% else %}
+                            (none)
+                        {% endif %}
                     </li>
                 {% endfor %}
             </ul>
@@ -135,7 +148,20 @@
                     <li>
                         <a href="{% url 'kick:campaign_detail' c.kick_id %}">{{ c.name }}</a>
                         (Game: <a href="{% url 'kick:game_detail' c.category.kick_id %}">{{ c.category.name }}</a>)
-                        - Start: {{ c.starts_at|default:'(none)' }} / End: {{ c.ends_at|default:'(none)' }}
+                        -
+                        Start:
+                        {% if c.starts_at %}
+                            <time datetime="{{ c.starts_at|date:'c' }}">{{ c.starts_at|date:'M d, Y H:i' }}</time>
+                        {% else %}
+                            (none)
+                        {% endif %}
+                        /
+                        End:
+                        {% if c.ends_at %}
+                            <time datetime="{{ c.ends_at|date:'c' }}">{{ c.ends_at|date:'M d, Y H:i' }}</time>
+                        {% else %}
+                            (none)
+                        {% endif %}
                     </li>
                 {% endfor %}
             </ul>
@@ -151,7 +177,20 @@
                     <li>
                         <a href="{% url 'twitch:reward_campaign_detail' c.twitch_id %}">{{ c.name }}</a>
                         (Game: <a href="{% url 'twitch:game_detail' c.game.twitch_id %}">{{ c.game.display_name }}</a>)
-                        - Start: {{ c.starts_at|default:'(none)' }} / End: {{ c.ends_at|default:'(none)' }}
+                        -
+                        Start:
+                        {% if c.starts_at %}
+                            <time datetime="{{ c.starts_at|date:'c' }}">{{ c.starts_at|date:'M d, Y H:i' }}</time>
+                        {% else %}
+                            (none)
+                        {% endif %}
+                        /
+                        End:
+                        {% if c.ends_at %}
+                            <time datetime="{{ c.ends_at|date:'c' }}">{{ c.ends_at|date:'M d, Y H:i' }}</time>
+                        {% else %}
+                            (none)
+                        {% endif %}
                     </li>
                 {% endfor %}
             </ul>
diff --git a/templates/kick/campaign_detail.html b/templates/kick/campaign_detail.html
index ca43ab0..ab9dfe0 100644
--- a/templates/kick/campaign_detail.html
+++ b/templates/kick/campaign_detail.html
@@ -51,7 +51,6 @@
                     <a href="{% url 'kick:campaign_list' %}">Campaigns</a> >
                     {{ campaign.name }}
                 </div>
-                <style>dd { margin-left: 0; }</style>
                 <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                     {% if campaign.category %}
                         <dt>Category</dt>
@@ -103,9 +102,7 @@
                     {% endif %}
                     {% if campaign.duration %}
                         <dt>Duration</dt>
-                        <dd>
-                            {{ campaign.duration }}
-                        </dd>
+                        <dd>{{ campaign.duration }}</dd>
                     {% endif %}
                     <dt>Added</dt>
                     <dd>
@@ -119,6 +116,22 @@
                               title="{{ campaign.updated_at|date:'DATETIME_FORMAT' }}">{{ campaign.updated_at|date:"M d, Y" }}</time>
                         ({{ campaign.updated_at|timesince }} ago)
                     </dd>
+                    {% if campaign.created_at %}
+                        <dt>Created</dt>
+                        <dd>
+                            <time datetime="{{ campaign.created_at|date:'c' }}"
+                                  title="{{ campaign.created_at|date:'DATETIME_FORMAT' }}">{{ campaign.created_at|date:"M d, Y H:i" }}</time>
+                            ({{ campaign.created_at|timesince }} ago)
+                        </dd>
+                    {% endif %}
+                    {% if campaign.api_updated_at %}
+                        <dt>API Updated</dt>
+                        <dd>
+                            <time datetime="{{ campaign.api_updated_at|date:'c' }}"
+                                  title="{{ campaign.api_updated_at|date:'DATETIME_FORMAT' }}">{{ campaign.api_updated_at|date:"M d, Y H:i" }}</time>
+                            ({{ campaign.api_updated_at|timesince }} ago)
+                        </dd>
+                    {% endif %}
                 </dl>
                 <div>
                     {% if campaign.channels.all %}
@@ -133,22 +146,6 @@
                         {% if campaign.channels.count > 5 %}and {{ campaign.channels.count|add:"-5" }} more{% endif %}
                     {% endif %}
                 </div>
-                {% if campaign.created_at %}
-                    <p style="margin: 0.25rem 0;">
-                        <time datetime="{{ campaign.created_at|date:'c' }}"
-                              title="{{ campaign.created_at|date:'DATETIME_FORMAT' }}">
-                            Created {{ campaign.created_at|date:"M d, Y H:i" }} ({{ campaign.created_at|timesince }} ago)
-                        </time>
-                    </p>
-                {% endif %}
-                {% if campaign.api_updated_at %}
-                    <p style="margin: 0.25rem 0;">
-                        <time datetime="{{ campaign.api_updated_at|date:'c' }}"
-                              title="{{ campaign.api_updated_at|date:'DATETIME_FORMAT' }}">
-                            API Updated {{ campaign.api_updated_at|date:"M d, Y H:i" }} ({{ campaign.api_updated_at|timesince }} ago)
-                        </time>
-                    </p>
-                {% endif %}
                 <footer aria-label="Links"
                         style="margin-top: 0.5rem;
                                border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent 80%);
diff --git a/templates/kick/category_detail.html b/templates/kick/category_detail.html
index c704830..831c451 100644
--- a/templates/kick/category_detail.html
+++ b/templates/kick/category_detail.html
@@ -54,7 +54,6 @@
                         <a href="{{ category.kick_url }}">{{ category.kick_url }}</a>
                     </p>
                 {% endif %}
-                <style>dd { margin-left: 0; }</style>
                 <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                     <dt>ID</dt>
                     <dd>
diff --git a/templates/kick/dashboard.html b/templates/kick/dashboard.html
index 929f31d..afd16c7 100644
--- a/templates/kick/dashboard.html
+++ b/templates/kick/dashboard.html
@@ -20,36 +20,19 @@
     <main>
         <h1>Active Kick Drops</h1>
         <footer aria-label="Links"
-                style="margin-top: 0.5rem;
-                       border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent 80%);
-                       padding-top: 0.5rem">
-            <div style="display: flex;
-                        flex-wrap: wrap;
-                        column-gap: 1.5rem;
-                        row-gap: 0.4rem">
+                style="margin-top: 0.5rem; border-top: 1px solid color-mix(in srgb, CanvasText 20%, transparent 80%); padding-top: 0.5rem">
+            <div style="display: flex; flex-wrap: wrap; column-gap: 1.5rem; row-gap: 0.4rem">
                 <div>
-                    <div style="font-size: 0.8rem;
-                                color: color-mix(in srgb, CanvasText 55%, transparent 45%);
-                                margin-bottom: 0.15rem;
-                                text-transform: uppercase;
-                                letter-spacing: 0.05em">
-                        Subscribe <a href="{% url 'core:docs_rss' %}"
-    title="RSS feed documentation"
-    style="color: inherit;
-           text-decoration: none">(?)</a>
+                    <div style="font-size: 0.8rem; color: color-mix(in srgb, CanvasText 55%, transparent 45%); margin-bottom: 0.15rem; text-transform: uppercase; letter-spacing: 0.05em">
+                        Subscribe <a href="{% url 'core:docs_rss' %}" title="RSS feed documentation" style="color: inherit; text-decoration: none">(?)</a>
                     </div>
                     <div>
                         Campaigns:
-                        <a href="{% url 'kick:campaign_feed' %}"
-                           title="RSS feed for all campaigns">[rss]</a>
-                        <a href="{% url 'kick:campaign_feed_atom' %}"
-                           title="Atom feed for all campaigns">[atom]</a>
-                        <a href="{% url 'kick:campaign_feed_discord' %}"
-                           title="Discord-flavored feed for all campaigns">[discord-flavored]</a>
-                        <a href="{% url 'api-v1:kick-api-v1_list_campaigns' %}"
-                           title="Kick campaigns API">[api]</a>
-                        <a href="https://web.kick.com/api/v1/drops/campaigns"
-                           title="Kick's upstream API endpoint">[upstream api]</a>
+                        <a href="{% url 'kick:campaign_feed' %}" title="RSS feed for all campaigns">[rss]</a>
+                        <a href="{% url 'kick:campaign_feed_atom' %}" title="Atom feed for all campaigns">[atom]</a>
+                        <a href="{% url 'kick:campaign_feed_discord' %}" title="Discord-flavored feed for all campaigns">[discord-flavored]</a>
+                        <a href="{% url 'api-v1:kick-api-v1_list_campaigns' %}" title="Kick campaigns API">[api]</a>
+                        <a href="https://web.kick.com/api/v1/drops/campaigns" title="Kick upstream API endpoint">[upstream api]</a>
                     </div>
                 </div>
             </div>
@@ -57,7 +40,6 @@
         <hr />
         {% if active_campaigns %}
             {% for campaign in active_campaigns %}
-                <!-- {{ campaign }} -->
                 <article>
                     <header>
                         <h2>
@@ -79,117 +61,69 @@
                     <div style="display: flex; gap: 1rem;">
                         <div style="flex-shrink: 0;">
                             {% if campaign.image_url %}
-                                <img src="{{ campaign.image_url }}"
-                                     width="200"
-                                     height="200"
-                                     alt="{{ campaign.name }} image"
-                                     style="width: 200px;
-                                            height: auto;
-                                            border-radius: 8px" />
+                                <img src="{{ campaign.image_url }}" width="200" height="200" alt="{{ campaign.name }} image" style="width: 200px; height: auto; border-radius: 8px" />
                             {% else %}
-                                <div style="width: 200px;
-                                            height: 200px;
-                                            background-color: #eee;
-                                            display: flex;
-                                            align-items: center;
-                                            justify-content: center;
-                                            border-radius: 8px">No Image</div>
+                                <div style="width: 200px; height: 200px; background-color: #eee; display: flex; align-items: center; justify-content: center; border-radius: 8px">No Image</div>
                             {% endif %}
                         </div>
                         <div style="flex: 1;">
-                            <h3>
-                                <a href="{% url 'kick:campaign_detail' campaign.kick_id %}">{{ campaign.name }}</a>
-                            </h3>
-                            <!-- Start -->
-                            {% if campaign.starts_at %}
-                                <p style="margin: 0.25rem 0;">
-                                    <strong>Starts:</strong>
-                                    <time datetime="{{ campaign.starts_at|date:'c' }}"
-                                          title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">
-                                        {{ campaign.starts_at|date:"M d, Y H:i" }}
-                                    </time>
-                                    {% if campaign.starts_at < now %}
-                                        (started {{ campaign.starts_at|timesince }} ago)
-                                    {% else %}
-                                        (in {{ campaign.starts_at|timeuntil }})
-                                    {% endif %}
-                                </p>
-                            {% endif %}
-                            <!-- End -->
-                            {% if campaign.ends_at %}
-                                <p style="margin: 0.25rem 0;">
-                                    <strong>Ends:</strong>
-                                    <time datetime="{{ campaign.ends_at|date:'c' }}"
-                                          title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
-                                        {{ campaign.ends_at|date:"M d, Y H:i" }}
-                                    </time>
-                                    {% if campaign.ends_at < now %}
-                                        (ended {{ campaign.ends_at|timesince }} ago)
+                            <h3><a href="{% url 'kick:campaign_detail' campaign.kick_id %}">{{ campaign.name }}</a></h3>
+                            <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
+                                {% if campaign.starts_at %}
+                                    <dt>Starts</dt>
+                                    <dd>
+                                        <time datetime="{{ campaign.starts_at|date:'c' }}" title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">{{ campaign.starts_at|date:"M d, Y H:i" }}</time>
+                                        {% if campaign.starts_at < now %}(started {{ campaign.starts_at|timesince }} ago){% else %}(in {{ campaign.starts_at|timeuntil }}){% endif %}
+                                    </dd>
+                                {% endif %}
+                                {% if campaign.ends_at %}
+                                    <dt>Ends</dt>
+                                    <dd>
+                                        <time datetime="{{ campaign.ends_at|date:'c' }}" title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">{{ campaign.ends_at|date:"M d, Y H:i" }}</time>
+                                        {% if campaign.ends_at < now %}(ended {{ campaign.ends_at|timesince }} ago){% else %}(in {{ campaign.ends_at|timeuntil }}){% endif %}
+                                    </dd>
+                                {% endif %}
+                                {% if campaign.duration %}
+                                    <dt>Duration</dt>
+                                    <dd>{{ campaign.duration }}</dd>
+                                {% endif %}
+                                {% if campaign.rule_name %}
+                                    <dt>Rule</dt>
+                                    <dd>{{ campaign.rule_name }}</dd>
+                                {% endif %}
+                                <dt>Channels</dt>
+                                <dd>
+                                    {% if campaign.channels.all %}
+                                        <ul style="margin: 0; padding-left: 1rem;">
+                                            {% for channel in campaign.channels.all|slice:":5" %}
+                                                <li>
+                                                    {% if channel.user %}<a href="{{ channel.channel_url }}">{{ channel.user.username }}</a>{% else %}<a href="{{ channel.channel_url }}">{{ channel.slug }}</a>{% endif %}
+                                                </li>
+                                            {% endfor %}
+                                            {% if campaign.channels.count > 5 %}
+                                                <li style="color: #666; font-style: italic;">... and {{ campaign.channels.count|add:"-5" }} more</li>
+                                            {% endif %}
+                                        </ul>
                                     {% else %}
-                                        (in {{ campaign.ends_at|timeuntil }})
-                                    {% endif %}
-                                </p>
-                            {% endif %}
-                            <!-- Duration -->
-                            {% if campaign.duration %}
-                                <p style="margin: 0.25rem 0;">
-                                    <strong>Duration:</strong> {{ campaign.duration }}
-                                </p>
-                            {% endif %}
-                            {% if campaign.rule_name %}
-                                <p style="margin: 0.25rem 0;">
-                                    <strong>Rule:</strong> {{ campaign.rule_name }}
-                                </p>
-                            {% endif %}
-                            {% if campaign.connect_url %}
-                                <p style="margin: 0.25rem 0;">
-                                    <a href="{{ campaign.connect_url }}">Connect account</a>
-                                </p>
-                            {% endif %}
-                            <div style="margin-top: 0.5rem; font-size: 0.9rem;">
-                                <strong>Participating channels:</strong>
-                                {% if campaign.channels.all %}
-                                    <ul style="margin: 0.25rem 0 0 0; padding-left: 1rem;">
-                                        {% for channel in campaign.channels.all|slice:":5" %}
-                                            <li>
-                                                {% if channel.user %}
-                                                    <a href="{{ channel.channel_url }}">{{ channel.user.username }}</a>
-                                                {% else %}
-                                                    <a href="{{ channel.channel_url }}">{{ channel.slug }}</a>
-                                                {% endif %}
-                                            </li>
-                                        {% endfor %}
-                                        {% if campaign.channels.count > 5 %}
-                                            <li style="color: #666; font-style: italic;">... and {{ campaign.channels.count|add:"-5" }} more</li>
-                                        {% endif %}
-                                    </ul>
-                                {% else %}
-                                    {% if campaign.category %}
-                                        <p style="margin: 0.25rem 0 0 0;">
-                                            <a href="{{ campaign.category.kick_url }}">{{ campaign.category.name }}</a> is game wide.
-                                        </p>
+                                        {% if campaign.category %}<a href="{{ campaign.category.kick_url }}">{{ campaign.category.name }}</a> is game wide.{% endif %}
                                     {% endif %}
+                                </dd>
+                                {% if campaign.merged_rewards %}
+                                    <dt>Rewards</dt>
+                                    <dd>
+                                        <ul style="margin: 0; padding-left: 1rem;">
+                                            {% for reward in campaign.merged_rewards %}
+                                                <li>
+                                                    {% if reward.full_image_url %}<img src="{{ reward.full_image_url }}" alt="{{ reward.name }}" width="56" height="56" style="vertical-align: middle; border-radius: 4px" />{% endif %}
+                                                    {{ reward.name }} ({{ reward.required_units }} min)
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    </dd>
                                 {% endif %}
-                            </div>
-                            {% if campaign.merged_rewards %}
-                                <div style="margin-top: 0.75rem;">
-                                    <strong>Rewards:</strong>
-                                    <ul style="margin: 0.25rem 0 0 0; padding-left: 1rem;">
-                                        {% for reward in campaign.merged_rewards %}
-                                            <li>
-                                                {% if reward.full_image_url %}
-                                                    <img src="{{ reward.full_image_url }}"
-                                                         alt="{{ reward.name }}"
-                                                         width="56"
-                                                         height="56"
-                                                         style="vertical-align: middle;
-                                                                border-radius: 4px" />
-                                                {% endif %}
-                                                {{ reward.name }} ({{ reward.required_units }} min)
-                                            </li>
-                                        {% endfor %}
-                                    </ul>
-                                </div>
+                            </dl>
+                            {% if campaign.connect_url %}
+                                <p style="margin: 0.25rem 0;"><a href="{{ campaign.connect_url }}">Connect account</a></p>
                             {% endif %}
                         </div>
                     </div>
diff --git a/templates/kick/organization_detail.html b/templates/kick/organization_detail.html
index c1fb89a..ec27d35 100644
--- a/templates/kick/organization_detail.html
+++ b/templates/kick/organization_detail.html
@@ -2,6 +2,8 @@
 {% block title %}
     {{ org.name }} - Kick Organization
 {% endblock title %}
+{% block extra_head %}
+{% endblock extra_head %}
 {% block content %}
     <main>
         <nav aria-label="Breadcrumb">
@@ -31,7 +33,6 @@
                         <a href="{{ org.url }}">{{ org.url }}</a>
                     </p>
                 {% endif %}
-                <style>dd { margin-left: 0; }</style>
                 <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                     <dt>ID</dt>
                     <dd>
diff --git a/templates/twitch/campaign_detail.html b/templates/twitch/campaign_detail.html
index ee9e154..6f2490d 100644
--- a/templates/twitch/campaign_detail.html
+++ b/templates/twitch/campaign_detail.html
@@ -47,7 +47,6 @@
             {% endif %}
             <!-- Campaign description -->
             <p>{{ campaign.description|linebreaksbr }}</p>
-            <style>dd { margin-left: 0; }</style>
             <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                 <dt>Published</dt>
                 <dd>
@@ -173,52 +172,56 @@
             <tbody>
                 {% for drop in drops %}
                     <tr>
-                        <td>
-                            {% for benefit in drop.drop.benefits.all %}
-                                {% if benefit.image_asset_url %}
-                                    <!-- Show the benefit image if available -->
-                                    {% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=160 height=160 style="object-fit: cover; margin-right: 3px" %}
-                                {% endif %}
-                                {% if benefit.distribution_type == "BADGE" and drop.awarded_badge %}
-                                    <!-- If the drop awards a badge, show the badge prominently with its description -->
-                                    <div style="margin-top: 6px; font-size: 0.9em;">
-                                        <strong>Awards Badge:</strong>
-                                        <a href="{% url 'twitch:badge_set_detail' set_id=drop.awarded_badge.badge_set.set_id %}">
-                                            {% picture drop.awarded_badge.image_url_2x alt=drop.awarded_badge.title|add:" badge" width=24 height=24 style="vertical-align: middle; margin-right: 4px" %}
-                                            {{ drop.awarded_badge.title }}
-                                        </a>
-                                        {% if drop.awarded_badge.description %}
-                                            <!-- Show the badge description if available -->
-                                            <div style="margin-top: 4px; color: #a9a9a9; font-size: 0.9em;">{{ drop.awarded_badge.description|linebreaksbr }}</div>
-                                        {% endif %}
-                                    </div>
-                                {% endif %}
-                            {% endfor %}
-                        </td>
-                        <td>
-                            <div style="margin-bottom: 5px;">{{ drop.drop.name }}</div>
-                            {% for benefit in drop.drop.benefits.all %}
-                                {% if benefit.name != drop.drop.name %}
-                                    <!-- Show additional benefits if they have a different name than the drop itself -->
-                                    <div style="font-size: 0.9em; color: #a9a9a9; margin-bottom: 3px;">{{ benefit.name }}</div>
-                                {% endif %}
-                            {% endfor %}
+                        <td style="display: flex; gap: 12px; align-items: center;">
+                            <div style="flex-shrink: 0;">
+                                {% for benefit in drop.drop.benefits.all %}
+                                    {% if benefit.image_asset_url %}
+                                        {% picture benefit.image_best_url|default:benefit.image_asset_url alt=benefit.name width=160 height=160 style="object-fit: cover" %}
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
+                            <div>
+                                <div style="margin-bottom: 5px;">{{ drop.drop.name }}</div>
+                                {% for benefit in drop.drop.benefits.all %}
+                                    {% if benefit.name != drop.drop.name %}
+                                        <div style="font-size: 0.9em; color: #a9a9a9; margin-bottom: 3px;">{{ benefit.name }}</div>
+                                    {% endif %}
+                                {% endfor %}
+                                {% for benefit in drop.drop.benefits.all %}
+                                    {% if benefit.distribution_type == "BADGE" and drop.awarded_badge %}
+                                        <div style="margin-top: 6px; font-size: 0.9em;">
+                                            <strong>Awards Badge:</strong>
+                                            <a href="{% url 'twitch:badge_set_detail' set_id=drop.awarded_badge.badge_set.set_id %}">
+                                                {% picture drop.awarded_badge.image_url_2x alt=drop.awarded_badge.title|add:" badge" width=24 height=24 style="vertical-align: middle; margin-right: 4px" %}
+                                                {{ drop.awarded_badge.title }}
+                                            </a>
+                                            {% if drop.awarded_badge.description %}
+                                                <div style="margin-top: 4px; color: #a9a9a9; font-size: 0.9em;">{{ drop.awarded_badge.description|linebreaksbr }}</div>
+                                            {% endif %}
+                                        </div>
+                                    {% endif %}
+                                {% endfor %}
+                            </div>
                         </td>
                         <td>
-                            {% if drop.drop.required_minutes_watched %}{{ drop.drop.required_minutes_watched }} minutes watched{% endif %}
+                            {% if drop.drop.required_minutes_watched %}{{ drop.drop.required_minutes_watched }} minute{{ drop.drop.required_minutes_watched|pluralize }} watched{% endif %}
                             {% if drop.drop.required_subs > 0 %}
                                 {% if drop.drop.required_minutes_watched %}and{% endif %}
-                                {{ drop.drop.required_subs }} subscriptions required
+                                {{ drop.drop.required_subs }} subscription{{ drop.drop.required_subs|pluralize }} required
                             {% endif %}
                         </td>
                         <td>
                             <div>
-                                {% if drop.local_start %}{{ drop.local_start|date:"M j, Y H:i" }}{% endif %}
-                                {% if drop.local_start and drop.local_end %}-{% endif %}
-                                {% if drop.local_end %}{{ drop.local_end|date:"M j, Y H:i" }}{% endif %}
-                                <small style="color: #a9a9a9;">{{ drop.timezone_name }}</small>
+                                {% if drop.local_start %}
+                                    <time datetime="{{ drop.local_start|date:'c' }}">{{ drop.local_start|date:"M j, Y H:i" }}</time>
+                                {% endif %}
+                                {% if drop.local_start and drop.local_end %} &ndash; {% endif %}
+                                {% if drop.local_end %}
+                                    <time datetime="{{ drop.local_end|date:'c' }}">{{ drop.local_end|date:"M j, Y H:i" }}</time>
+                                {% endif %}
                             </div>
-                            <div style="font-size: 0.8em; color: #a9a9a9;">{{ drop.countdown_text }}</div>
+                            <div style="font-size: 0.8em; color: #a9a9a9;">TZ: {{ drop.timezone_name }}</div>
+                            <div style="font-size: 0.8em; color: #a9a9a9;">Duration: {{ drop.duration_text }}</div>
                         </td>
                     </tr>
                 {% endfor %}
diff --git a/templates/twitch/channel_detail.html b/templates/twitch/channel_detail.html
index 9110fad..e5efc40 100644
--- a/templates/twitch/channel_detail.html
+++ b/templates/twitch/channel_detail.html
@@ -4,13 +4,13 @@
 {% endblock title %}
 {% block content %}
     <!-- Channel Title -->
-    <h1>{{ channel.display_name }}</h1>
+    <h1 style="margin-top: 0; margin-bottom: 0px;">{{ channel.display_name }}</h1>
     <!-- Add breadcrumbs -->
     <div>
         <a href="{% url 'twitch:dashboard' %}">Twitch</a> > <a href="{% url 'twitch:channel_list' %}">Channels</a> > {{ channel.display_name }}
     </div>
     <!-- Channel metadata -->
-    <dl>
+    <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
         {% if channel.display_name != channel.name %}
             <dt>Username</dt>
             <dd>
@@ -82,7 +82,8 @@
                             {% endif %}
                         </td>
                         <td>
-                            <span title="Ends on {{ campaign.end_at|date:'M d, Y H:i' }}">Ends in {{ campaign.end_at|timeuntil }}</span>
+                            <time datetime="{{ campaign.end_at|date:'c' }}"
+                                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">Ends in {{ campaign.end_at|timeuntil }}</time>
                         </td>
                     </tr>
                 {% endfor %}
@@ -130,7 +131,8 @@
                             {% endif %}
                         </td>
                         <td>
-                            <span title="Starts on {{ campaign.start_at|date:'M d, Y H:i' }}">Starts in {{ campaign.start_at|timeuntil }}</span>
+                            <time datetime="{{ campaign.start_at|date:'c' }}"
+                                  title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">Starts in {{ campaign.start_at|timeuntil }}</time>
                         </td>
                     </tr>
                 {% endfor %}
@@ -177,7 +179,8 @@
                             {% endif %}
                         </td>
                         <td>
-                            <span title="Ended on {{ campaign.end_at|date:'M d, Y H:i' }}">{{ campaign.end_at|timesince }} ago</span>
+                            <time datetime="{{ campaign.end_at|date:'c' }}"
+                                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">{{ campaign.end_at|timesince }} ago</time>
                         </td>
                     </tr>
                 {% endfor %}
diff --git a/templates/twitch/dashboard.html b/templates/twitch/dashboard.html
index f9f1ce2..8a919eb 100644
--- a/templates/twitch/dashboard.html
+++ b/templates/twitch/dashboard.html
@@ -102,29 +102,22 @@
                                                 <h4 style="margin: 0.5rem 0; text-align: left;">{{ campaign_data.clean_name }}</h4>
                                             </a>
                                             <!-- End time -->
-                                            <time datetime="{{ campaign_data.campaign.end_at|date:'c' }}"
-                                                  title="{{ campaign_data.campaign.end_at|date:'DATETIME_FORMAT' }}"
-                                                  style="font-size: 0.9rem;
-                                                         display: block;
-                                                         text-align: left">
+                                            <div style="font-size: 0.9rem;
+                                                        text-align: left"
+                                                 title="{{ campaign_data.campaign.end_at|date:'l, j F Y H:i:s' }} {% now 'T' %}">
                                                 Ends in {{ campaign_data.campaign.end_at|timeuntil }}
-                                            </time>
+                                            </div>
                                             <!-- Start time -->
-                                            <time datetime="{{ campaign_data.campaign.start_at|date:'c' }}"
-                                                  title="{{ campaign_data.campaign.start_at|date:'DATETIME_FORMAT' }}"
-                                                  style="font-size: 0.9rem;
-                                                         display: block;
-                                                         text-align: left">
+                                            <div style="font-size: 0.9rem;
+                                                        text-align: left"
+                                                 title="{{ campaign_data.campaign.start_at|date:'l, j F Y H:i:s' }} {% now 'T' %}">
                                                 Started {{ campaign_data.campaign.start_at|timesince }} ago
-                                            </time>
+                                            </div>
                                             <!-- Duration -->
-                                            <time datetime="{{ campaign_data.campaign.duration_iso }}"
-                                                  title="{{ campaign_data.campaign.start_at|date:'DATETIME_FORMAT' }} to {{ campaign_data.campaign.end_at|date:'DATETIME_FORMAT' }}"
-                                                  style="font-size: 0.9rem;
-                                                         display: block;
-                                                         text-align: left">
+                                            <div style="font-size: 0.9rem;
+                                                       text-align: left">
                                                 Duration: {{ campaign_data.campaign.start_at|timesince:campaign_data.campaign.end_at }}
-                                            </time>
+                                            </div>
                                             <div style="margin-top: 0.5rem; font-size: 0.8rem; ">
                                                 <strong>Channels:</strong>
                                                 <ul style="margin: 0.25rem 0 0 0;
@@ -232,18 +225,20 @@
                                         <p style="margin: 0.25rem 0;">
                                             <strong>Starts:</strong>
                                             <time datetime="{{ campaign.starts_at|date:'c' }}"
-                                                  title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">
+                                                  title="{{ campaign.starts_at|date:'l, j F Y H:i:s' }}">
                                                 {{ campaign.starts_at|date:"M d, Y H:i" }}
                                             </time>
+                                            <small style="color: #a9a9a9;">{% now "T" %}</small>
                                         </p>
                                     {% endif %}
                                     {% if campaign.ends_at %}
                                         <p style="margin: 0.25rem 0;">
                                             <strong>Ends:</strong>
                                             <time datetime="{{ campaign.ends_at|date:'c' }}"
-                                                  title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
+                                                  title="{{ campaign.ends_at|date:'l, j F Y H:i:s' }}">
                                                 {{ campaign.ends_at|date:"M d, Y H:i" }}
                                             </time>
+                                            <small style="color: #a9a9a9;">{% now "T" %}</small>
                                         </p>
                                     {% endif %}
                                     {% if campaign.game %}
diff --git a/templates/twitch/game_detail.html b/templates/twitch/game_detail.html
index 3c7602e..f60744e 100644
--- a/templates/twitch/game_detail.html
+++ b/templates/twitch/game_detail.html
@@ -59,7 +59,6 @@
                 {% endif %}
             </div>
             <!-- Game metadata -->
-            <style>dd { margin-left: 0; }</style>
             <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                 {% if owners %}
                     <dt>Owned by</dt>
@@ -179,7 +178,8 @@
                             {% endif %}
                         </td>
                         <td>
-                            <span title="{{ campaign.end_at|date:'M d, Y H:i' }}">Ends in {{ campaign.end_at|timeuntil }}</span>
+                            <time datetime="{{ campaign.end_at|date:'c' }}"
+                                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">Ends in {{ campaign.end_at|timeuntil }}</time>
                         </td>
                     </tr>
                 {% endfor %}
@@ -208,7 +208,8 @@
                             {% endif %}
                         </td>
                         <td>
-                            <span title="Starts on {{ campaign.start_at|date:'M d, Y H:i' }}">Starts in {{ campaign.start_at|timeuntil }}</span>
+                            <time datetime="{{ campaign.start_at|date:'c' }}"
+                                  title="{{ campaign.start_at|date:'DATETIME_FORMAT' }}">Starts in {{ campaign.start_at|timeuntil }}</time>
                         </td>
                     </tr>
                 {% endfor %}
@@ -238,7 +239,8 @@
                             {% endif %}
                         </td>
                         <td>
-                            <span title="Ended on {{ campaign.end_at|date:'M d, Y H:i' }}">{{ campaign.end_at|timesince }} ago</span>
+                            <time datetime="{{ campaign.end_at|date:'c' }}"
+                                  title="{{ campaign.end_at|date:'DATETIME_FORMAT' }}">{{ campaign.end_at|timesince }} ago</time>
                         </td>
                     </tr>
                 {% endfor %}
@@ -273,7 +275,8 @@
                             {% endif %}
                         </td>
                         <td style="vertical-align: top;">
-                            <span title="{{ reward.ends_at|date:'M d, Y H:i' }}">Ends in {{ reward.ends_at|timeuntil }}</span>
+                            <time datetime="{{ reward.ends_at|date:'c' }}"
+                                  title="{{ reward.ends_at|date:'DATETIME_FORMAT' }}">Ends in {{ reward.ends_at|timeuntil }}</time>
                         </td>
                         <td style="vertical-align: top; white-space: nowrap;">
                             {% if reward.about_url and reward.external_url and reward.about_url == reward.external_url %}
@@ -311,7 +314,8 @@
                             {% endif %}
                         </td>
                         <td style="vertical-align: top;">
-                            <span title="Starts on {{ reward.starts_at|date:'M d, Y H:i' }}">Starts in {{ reward.starts_at|timeuntil }}</span>
+                            <time datetime="{{ reward.starts_at|date:'c' }}"
+                                  title="{{ reward.starts_at|date:'DATETIME_FORMAT' }}">Starts in {{ reward.starts_at|timeuntil }}</time>
                         </td>
                         <td style="vertical-align: top; white-space: nowrap;">
                             {% if reward.about_url and reward.external_url and reward.about_url == reward.external_url %}
@@ -349,7 +353,8 @@
                             {% endif %}
                         </td>
                         <td style="vertical-align: top;">
-                            <span title="Ended on {{ reward.ends_at|date:'M d, Y H:i' }}">{{ reward.ends_at|timesince }} ago</span>
+                            <time datetime="{{ reward.ends_at|date:'c' }}"
+                                  title="{{ reward.ends_at|date:'DATETIME_FORMAT' }}">{{ reward.ends_at|timesince }} ago</time>
                         </td>
                         <td style="vertical-align: top; white-space: nowrap;">
                             {% if reward.about_url and reward.external_url and reward.about_url == reward.external_url %}
diff --git a/templates/twitch/games_grid.html b/templates/twitch/games_grid.html
index ff35d8c..f02d338 100644
--- a/templates/twitch/games_grid.html
+++ b/templates/twitch/games_grid.html
@@ -93,7 +93,9 @@
                                             text-align: center">
                                 <div style="margin-bottom: 0.25rem;">
                                     {% if item.game.box_art_best_url %}
-                                        {% picture item.game.box_art_best_url alt="Box art for "|add:item.game.display_name width=180 height=240 style="border-radius: 8px" %}
+                                        <a href="{% url 'twitch:game_detail' item.game.twitch_id %}">
+                                            {% picture item.game.box_art_best_url alt="Box art for "|add:item.game.display_name width=180 height=240 style="border-radius: 8px" %}
+                                        </a>
                                     {% else %}
                                         <div style="width: 180px;
                                                     height: 240px;
diff --git a/templates/twitch/includes/reward_campaign_card.html b/templates/twitch/includes/reward_campaign_card.html
index 1b3f70a..dc8611a 100644
--- a/templates/twitch/includes/reward_campaign_card.html
+++ b/templates/twitch/includes/reward_campaign_card.html
@@ -1,65 +1,50 @@
 {% load image_tags %}
-<article id="reward-campaign-{{ campaign.twitch_id }}"
-         style="display: flex;
-                gap: 1rem;
-                margin-bottom: 1rem;
-                align-items: flex-start">
-    <a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}"
-       style="flex-shrink: 0;
-              display: block;
-              line-height: 0">{% picture campaign.image_best_url alt="Image for "|add:campaign.name width=120 %}</a>
-    <div>
-        <h3 style="margin: 0;">
-            <a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}">
-                {% if campaign.brand %}
-                    {{ campaign.brand }}: {{ campaign.name }}
-                {% else %}
-                    {{ campaign.name }}
-                {% endif %}
-            </a>
-        </h3>
-        {% if campaign.starts_at <= now and campaign.ends_at >= now %}
-            <p style="margin: 0.25rem 0;">
-                <strong>Ends:</strong>
-                <time datetime="{{ campaign.ends_at|date:'c' }}"
-                      title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
-                    {{ campaign.ends_at|date:"M d, Y H:i" }} ({{ campaign.ends_at|timeuntil }} left)
-                </time>
-            </p>
-        {% elif campaign.starts_at > now %}
-            <p style="margin: 0.25rem 0;">
-                <strong>Starts:</strong>
-                <time datetime="{{ campaign.starts_at|date:'c' }}"
-                      title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">
-                    {{ campaign.starts_at|date:"M d, Y H:i" }} (in {{ campaign.starts_at|timeuntil }})
-                </time>
-            </p>
-        {% else %}
-            <p style="margin: 0.25rem 0;">
-                <strong>Ended:</strong>
-                <time datetime="{{ campaign.ends_at|date:'c' }}"
-                      title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
-                    {{ campaign.ends_at|date:"M d, Y H:i" }} ({{ campaign.ends_at|timesince }} ago)
-                </time>
-            </p>
-        {% endif %}
-        {% if campaign.game %}
-            <p style="margin: 0.25rem 0;">
-                <strong>Game:</strong>
-                <a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.display_name }}</a>
-            </p>
-        {% elif campaign.is_sitewide %}
-            <p style="margin: 0.25rem 0;">
-                <strong>Type:</strong> Site-wide reward campaign
-            </p>
-        {% else %}
-            <p style="margin: 0.25rem 0;">
-                <strong>Type:</strong>
-                <a href="{% url 'twitch:game_less_rewards' %}">No game assigned</a>
-            </p>
-        {% endif %}
-        {% if campaign.summary %}
-            <p style="margin: 0.5rem 0 0 0;">{{ campaign.summary }}</p>
-        {% endif %}
-    </div>
+<article id="reward-campaign-{{ campaign.twitch_id }}" style="display: flex; gap: 1rem; margin-bottom: 1rem; align-items: flex-start">
+  <a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}" style="flex-shrink: 0; display: block; line-height: 0">{% picture campaign.image_best_url alt="Image for "|add:campaign.name width=120 %}</a>
+  <div>
+    <h3 style="margin: 0;">
+      <a href="{% url 'twitch:reward_campaign_detail' campaign.twitch_id %}">
+        {% if campaign.brand %}{{ campaign.brand }}: {% endif %}{{ campaign.name }}
+      </a>
+    </h3>
+    <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
+      {% if campaign.starts_at <= now and campaign.ends_at >= now %}
+        <dt>Ends</dt>
+        <dd>
+          <time datetime="{{ campaign.ends_at|date:'c' }}" title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
+            {{ campaign.ends_at|date:"M d, Y H:i" }} ({{ campaign.ends_at|timeuntil }} left)
+          </time>
+        </dd>
+      {% elif campaign.starts_at > now %}
+        <dt>Starts</dt>
+        <dd>
+          <time datetime="{{ campaign.starts_at|date:'c' }}" title="{{ campaign.starts_at|date:'DATETIME_FORMAT' }}">
+            {{ campaign.starts_at|date:"M d, Y H:i" }} (in {{ campaign.starts_at|timeuntil }})
+          </time>
+        </dd>
+      {% else %}
+        <dt>Ended</dt>
+        <dd>
+          <time datetime="{{ campaign.ends_at|date:'c' }}" title="{{ campaign.ends_at|date:'DATETIME_FORMAT' }}">
+            {{ campaign.ends_at|date:"M d, Y H:i" }} ({{ campaign.ends_at|timesince }} ago)
+          </time>
+        </dd>
+      {% endif %}
+      {% if campaign.game %}
+        <dt>Game</dt>
+        <dd><a href="{% url 'twitch:game_detail' campaign.game.twitch_id %}">{{ campaign.game.display_name }}</a></dd>
+      {% elif campaign.is_sitewide %}
+        <dt>Type</dt>
+        <dd>Site-wide reward campaign</dd>
+      {% else %}
+        <dt>Type</dt>
+        <dd><a href="{% url 'twitch:game_less_rewards' %}">Brand reward</a></dd>
+      {% endif %}
+      <dt>Data source</dt>
+      <dd>{{ campaign.data_source }}</dd>
+    </dl>
+    {% if campaign.summary %}
+      <p style="margin: 0.5rem 0 0 0;">{{ campaign.summary }}</p>
+    {% endif %}
+  </div>
 </article>
diff --git a/templates/twitch/organization_detail.html b/templates/twitch/organization_detail.html
index 6432d78..368761a 100644
--- a/templates/twitch/organization_detail.html
+++ b/templates/twitch/organization_detail.html
@@ -33,7 +33,6 @@
             {{ games_count }} game{{ games_count|pluralize }}
             {% if total_campaigns %}· {{ total_campaigns }} campaign{{ total_campaigns|pluralize }}{% endif %}
         </div>
-        <style>dd { margin-left: 0; }</style>
         <dl style="display: grid;
                    grid-template-columns: auto 1fr;
                    gap: 0 8px;
diff --git a/templates/twitch/reward_campaign_detail.html b/templates/twitch/reward_campaign_detail.html
index 3207bfc..59b9d17 100644
--- a/templates/twitch/reward_campaign_detail.html
+++ b/templates/twitch/reward_campaign_detail.html
@@ -29,9 +29,9 @@
         <div style="display: flex; flex-direction: column;">
             <!-- Campaign Title -->
             {% if reward_campaign.brand %}
-                <h1 id="campaign-title">{{ reward_campaign.brand }}: {{ reward_campaign.name }}</h1>
+                <h1 id="campaign-title" style="margin-top: 0; margin-bottom: 0px;">{{ reward_campaign.brand }}: {{ reward_campaign.name }}</h1>
             {% else %}
-                <h1 id="campaign-title">{{ reward_campaign.name }}</h1>
+                <h1 id="campaign-title" style="margin-top: 0; margin-bottom: 0px;">{{ reward_campaign.name }}</h1>
             {% endif %}
             <!-- Game eligibility -->
             <div>
@@ -50,7 +50,7 @@
             </div>
             <!-- Campaign Summary -->
             {% if reward_campaign.summary %}<p id="campaign-summary">{{ reward_campaign.summary|linebreaksbr }}</p>{% endif %}
-            <dl>
+            <dl style="display: grid; grid-template-columns: auto 1fr; gap: 0 8px;">
                 <!-- Campaign Status -->
                 <dt>Status</dt>
                 <dd>
@@ -64,11 +64,13 @@
                 </dd>
                 <dt>Added</dt>
                 <dd>
-                    {{ reward_campaign.added_at|date:"M d, Y H:i" }} ({{ reward_campaign.added_at|timesince }} ago)
+                    <time datetime="{{ reward_campaign.added_at|date:'c' }}"
+                          title="{{ reward_campaign.added_at|date:'DATETIME_FORMAT' }}">{{ reward_campaign.added_at|date:"M d, Y H:i" }}</time> ({{ reward_campaign.added_at|timesince }} ago)
                 </dd>
                 <dt>Last updated</dt>
                 <dd>
-                    {{ reward_campaign.updated_at|date:"M d, Y H:i" }} ({{ reward_campaign.updated_at|timesince }} ago)
+                    <time datetime="{{ reward_campaign.updated_at|date:'c' }}"
+                          title="{{ reward_campaign.updated_at|date:'DATETIME_FORMAT' }}">{{ reward_campaign.updated_at|date:"M d, Y H:i" }}</time> ({{ reward_campaign.updated_at|timesince }} ago)
                 </dd>
                 <!-- Reward Start Time -->
                 <dt>
diff --git a/twitch/models.py b/twitch/models.py
index f497e43..1d9a0a3 100644
--- a/twitch/models.py
+++ b/twitch/models.py
@@ -1126,13 +1126,32 @@ class DropCampaign(auto_prefetch.Model):  # ruff:ignore[too-many-public-methods]
         drops: list[TimeBasedDrop] = list(self.time_based_drops.all())  # pyright: ignore[reportAttributeAccessIssue]
         awarded_badges: dict[str, ChatBadge] = self.awarded_badges_by_drop_twitch_id()
 
+        current_tz: str = str(timezone.get_current_timezone()) or "UTC"
+
+        def _duration_text(drop: TimeBasedDrop) -> str:
+            """Compact duration between start and end, e.g. "23d 8h 3m".
+
+            Returns:
+                str: Compact duration string, or empty string if either date is missing.
+            """
+            start = drop.start_at
+            end = drop.end_at
+            if not start or not end:
+                return ""
+            total = end - start
+            days: int = total.days
+            hours, remainder = divmod(total.seconds, 3600)
+            minutes, _seconds = divmod(remainder, 60)
+            return f"{days}d {hours}h {minutes}m"
+
         return [
             {
                 "drop": drop,
                 "local_start": drop.start_at,
                 "local_end": drop.end_at,
-                "timezone_name": "UTC",
+                "timezone_name": current_tz,
                 "countdown_text": self._countdown_text_for_drop(drop, now),
+                "duration_text": _duration_text(drop),
                 "awarded_badge": awarded_badges.get(drop.twitch_id),
             }
             for drop in drops
-- 
2.51.2