From d429ccfc56b5768359ba77b963db7af6b26c3c88 Mon Sep 17 00:00:00 2001
From: Klaas van Schelven <klaas@vanschelven.com>
Date: Sat, 30 Mar 2024 22:22:33 +0100
Subject: [PATCH] Resolve/mute buttons: on their own line on small screens

---
 issues/templates/issues/base.html | 21 ++++++++++++---------
 theme/static/css/dist/styles.css  | 16 ++++++++++++++++
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/issues/templates/issues/base.html b/issues/templates/issues/base.html
index 70d4684..995f8bf 100644
--- a/issues/templates/issues/base.html
+++ b/issues/templates/issues/base.html
@@ -3,14 +3,9 @@
 {% block title %}{{ issue.title }}{# note: dubious: should perhaps be event.title... #} · {{ block.super }}{% endblock %}
 
 {% block content %}
-<div class="m-4 flex"><!-- container for the white bit (issue title, buttons) at the top of the page -->
-    <div class="overflow-hidden"><!-- top, LHS (various texts) -->
-        <h1 class="text-4xl font-bold text-ellipsis whitespace-nowrap overflow-hidden">{{ issue.get_main_exception.type }}</h1>
-        <div class="text-xl text-ellipsis whitespace-nowrap overflow-hidden">{{ issue.get_main_exception.value }}</div>
-        {% if parsed_data.request %}<div class="italic mt-4">{{ parsed_data.request.method }} {{ parsed_data.request.url }}</div>{% endif %}
-        <div class="text-ellipsis whitespace-nowrap overflow-hidden">{% with issue.get_main_exception.stacktrace.frames|last as last_frame %}<span class="font-bold">{% if last_frame.module %}{{ last_frame.module}}{% else %}{{ last_frame.filename }}{% endif %}</span>{% if last_frame.function %} in <span class="font-bold">{{ last_frame.function }}</span>{% endif %}{% endwith %}</div>
-    </div>
-    <div class="ml-auto flex-none"><!-- top, RHS (buttons) -->
+<div class="m-4 flex flex-col lg:flex-row-reverse"><!-- container for the white bit (issue title, buttons) at the top of the page -->
+
+    <div class="ml-auto flex-none pb-4 lg:pb-0"><!-- top, RHS (buttons) -->
         <form action="" method="post">
         {% csrf_token %}
         {% if issue.is_resolved %}{# i.e. buttons disabled #}
@@ -92,7 +87,15 @@
         {% endspaceless %}
 
         </form>
-    </div>
+    </div> {# top, RHS (buttons) #}
+
+    <div class="overflow-hidden"><!-- top, LHS (various texts) -->
+        <h1 class="text-4xl font-bold text-ellipsis whitespace-nowrap overflow-hidden">{{ issue.get_main_exception.type }}</h1>
+        <div class="text-xl text-ellipsis whitespace-nowrap overflow-hidden">{{ issue.get_main_exception.value }}</div>
+        {% if parsed_data.request %}<div class="italic mt-4">{{ parsed_data.request.method }} {{ parsed_data.request.url }}</div>{% endif %}
+        <div class="text-ellipsis whitespace-nowrap overflow-hidden">{% with issue.get_main_exception.stacktrace.frames|last as last_frame %}<span class="font-bold">{% if last_frame.module %}{{ last_frame.module}}{% else %}{{ last_frame.filename }}{% endif %}</span>{% if last_frame.function %} in <span class="font-bold">{{ last_frame.function }}</span>{% endif %}{% endwith %}</div>
+    </div> {# top, LHS (various texts) #}
+
 </div>
 
 <div class="flex items-start"><!-- flex container for the 2 'windows' in this page' -->
diff --git a/theme/static/css/dist/styles.css b/theme/static/css/dist/styles.css
index 84ff812..cb1b220 100644
--- a/theme/static/css/dist/styles.css
+++ b/theme/static/css/dist/styles.css
@@ -2210,6 +2210,22 @@ span.linenos.special {
   .lg\:flex {
     display: flex;
   }
+
+  .lg\:flex-row {
+    flex-direction: row;
+  }
+
+  .lg\:flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .lg\:pb-4 {
+    padding-bottom: 1rem;
+  }
+
+  .lg\:pb-0 {
+    padding-bottom: 0px;
+  }
 }
 
 .peer:focus ~ .rtl\:peer-focus\:left-auto:where([dir="rtl"], [dir="rtl"] *) {