From a5678e15dc80d93ec465fdb3d8c09dbd6db11ec0 Mon Sep 17 00:00:00 2001
From: jude <jude@jellywx.com>
Date: Thu, 3 Aug 2023 18:07:03 +0100
Subject: [PATCH] Fix styling on buttons

Prevent template buttons from wrapping by consuming more vertical space on middle-sized screens
---
 web/static/css/style.css                      | 43 ++++++++++++++++++-
 .../guild_reminder.html.tera                  | 38 ++++++++--------
 2 files changed, 61 insertions(+), 20 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index b6776b5..aa039b5 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -593,13 +593,52 @@ li.highlight {
     margin-bottom: 0 !important;
 }
 
-@media only screen and (max-width: 768px) {
+.button-row {
+    display: flex;
+}
+
+.button-row > div {
+    margin: 2px;
+}
+
+.button-row .button-row-reminder {
+    flex-grow: 0;
+}
+
+.button-row-template {
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+}
+
+@media only screen and (max-width: 1408px) {
     .button-row {
         display: flex;
         flex-direction: column;
     }
 
-    .button-row > button {
+    .button-row .button-row-reminder {
+        width: 100%;
+        margin: 4px;
+    }
+
+    .button-row .button-row-template button {
+        flex-basis: 0;
+        flex-grow: 1;
+    }
+
+    .button-row-reminder button {
+        width: 100%;
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    .button-row-edit {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .button-row-edit > button {
         width: 100%;
         margin: 4px;
     }
diff --git a/web/templates/reminder_dashboard/guild_reminder.html.tera b/web/templates/reminder_dashboard/guild_reminder.html.tera
index 2aae814..29b1c92 100644
--- a/web/templates/reminder_dashboard/guild_reminder.html.tera
+++ b/web/templates/reminder_dashboard/guild_reminder.html.tera
@@ -234,19 +234,24 @@
                     </div>
                 </div>
 
-                <div class="button-row">
-                    <span class="pad-left"></span>
-                    {% if creating %}
-                        <button class="button is-success" id="createReminder">
-                            <span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
-                        </button>
-                        <button class="button is-success is-outlined" id="createTemplate">
-                            <span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
-                        </button>
-                        <button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
-                            Load Template
-                        </button>
-                    {% else %}
+                {% if creating %}
+                    <div class="button-row">
+                        <div class="button-row-reminder">
+                            <button class="button is-success" id="createReminder">
+                                <span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
+                            </button>
+                        </div>
+                        <div class="button-row-template">
+                            <button class="button is-success is-outlined" id="createTemplate">
+                                <span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
+                            </button>
+                            <button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
+                                Load Template
+                            </button>
+                        </div>
+                    </div>
+                {% else %}
+                    <div class="button-row-edit">
                         <button class="button is-success save-btn">
                             <span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
                         </button>
@@ -255,11 +260,8 @@
                         <button class="button is-danger delete-reminder">
                             Delete
                         </button>
-<!--                        <button class="button is-info demo-reminder">-->
-<!--                            Demo-->
-<!--                        </button>-->
-                    {% endif %}
-                </div>
+                    </div>
+                {% endif %}
             </div>
         </div>
     </div>