From d1affe271c27a8dc82877f39f824ca54be6a4c26 Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Fri, 22 Dec 2023 18:36:21 +0000
Subject: [PATCH] ui: wrap settings header

---
 html/admin.html       | 18 +++++++++---------
 html/login-modal.html |  8 ++++----
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index d21f22e..a3931a3 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -345,7 +345,7 @@
                     <input id="backups-file" name="backups-file" type="file" hidden>
                     <button class="button ~neutral @low mr-2 mb-2" id="settings-backups-sort-direction">{{ .strings.sortDirection }}</button>
                 </div>
-                <div class="overflow-x-auto">
+                <div class="overflow-x-auto text-xs md:text-sm">
                     <table class="table">
                         <thead>
                             <tr>
@@ -852,19 +852,19 @@
             </div>
             <div id="tab-settings" class="unfocused">
                 <div class="card @low dark:~d_neutral settings overflow">
-                    <div class="flex-expand">
-                        <div class="flex-row">
+                    <div class="flex flex-col md:flex-row align-middle gap-2">
+                        <div class="flex flex-row align-middle justify-between md:justify-normal">
                             <span class="heading">{{ .strings.settings }}</span>
-                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-2 my-2">
+                            <label for="settings-advanced-enabled" class="button ~neutral @low ml-2">
                                 <input type="checkbox" id="settings-advanced-enabled" aria-label="Advanced settings enabled">
                                 <span class="ml-2">{{ .strings.advancedSettings }} </span>
                             </label>
                         </div>
-                        <div>
-                            <span class="button ~neutral @low my-1" id="settings-logs">{{ .strings.logs }}</span>
-                            <span class="button ~info @low my-1" id="settings-backups">{{ .strings.backups }}</span>
-                            <span class="button ~neutral @low my-1" id="settings-restart">{{ .strings.settingsRestart }}</span>
-                            <span class="button ~urge @low unfocused my-1" id="settings-save">{{ .strings.settingsSave }}</span>
+                        <div class="flex flex-row justify-start md:justify-end gap-2 w-100">
+                            <span class="button ~neutral @low" id="settings-logs">{{ .strings.logs }}</span>
+                            <span class="button ~info @low" id="settings-backups">{{ .strings.backups }}</span>
+                            <span class="button ~neutral @low" id="settings-restart">{{ .strings.settingsRestart }}</span>
+                            <span class="button ~urge @low unfocused" id="settings-save">{{ .strings.settingsSave }}</span>
                         </div>
                     </div>
                     <div class="flex flex-col md:flex-row gap-3">
diff --git a/html/login-modal.html b/html/login-modal.html
index e3c4a5d..05f1611 100644
--- a/html/login-modal.html
+++ b/html/login-modal.html
@@ -1,21 +1,21 @@
 <div id="modal-login" class="modal">
-    <div class="my-[10%] row items-stretch relative mx-auto w-[40%] lg:w-[60%]">
+    <div class="my-[10%] row items-stretch relative mx-auto w-11/12 sm:w-4/5 lg:w-1/2">
         {{ if index . "LoginMessageEnabled" }}
             {{ if .LoginMessageEnabled }}
-                <div class="card mx-2 flex-initial w-[100%] xl:w-[35%] mb-4 xl:mb-0 dark:~d_neutral @low content">
+                <div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
                     {{ .LoginMessageContent }}
                 </div>
             {{ end }}
         {{ end }}
         {{ if index . "userPageEnabled" }}
                 {{ if and .userPageEnabled .showUserPageLink }}
-                <div class="card mx-2 flex-initial w-[100%] xl:w-[35%] mb-4 xl:mb-0 dark:~d_neutral @low content">
+                <div class="card mx-2 flex-initial w-[100%] lg:w-[35%] mb-4 lg:mb-0 dark:~d_neutral @low content">
                     <span class="heading row">{{ .strings.loginNotAdmin }}</span>
                     <a class="button ~info h-12 w-100" href="{{ .urlBase }}/my/account"><i class="ri-account-circle-fill mr-2"></i>{{ .strings.myAccount }}</a>
                 </div>
             {{ end }}
         {{ end }}
-        <form class="card mx-2 flex-auto form-login w-[100%] xl:w-[55%] mb-0" href="">
+        <form class="card mx-2 flex-auto form-login w-[100%] lg:w-[55%] mb-0" href="">
             <span class="heading">{{ .strings.login }}</span>
             <input type="text" class="field input ~neutral @high mt-4 mb-2" placeholder="{{ .strings.username }}" id="login-user">
             <input type="password" class="field input ~neutral @high mb-4" placeholder="{{ .strings.password }}" id="login-password">