From ea109c7b63b0db02a3638d5bf7d37aa43c3ad4cc Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Fri, 22 Dec 2023 18:06:12 +0000
Subject: [PATCH] ui: wrap accounts/activity headers

---
 html/admin.html | 48 ++++++++++++++++++++++++++++--------------------
 1 file changed, 28 insertions(+), 20 deletions(-)

diff --git a/html/admin.html b/html/admin.html
index 51f3a6d..d21f22e 100644
--- a/html/admin.html
+++ b/html/admin.html
@@ -242,7 +242,7 @@
         <div id="modal-announce" class="modal">
             <form class="relative mx-auto my-[10%] w-4/5 lg:w-2/3 content card" id="form-announce" href="">
                 <span class="heading"><span id="header-announce"></span> <span class="modal-close">&times;</span></span>
-                <div class="row">
+                <div class="flex flex-col md:flex-row">
                     <div class="col card ~neutral @low">
                         <div id="announce-details">
                             <span class="label supra" for="editor-variables" id="label-editor-variables">{{ .strings.variables }}</span>
@@ -696,18 +696,20 @@
             </div>
             <div id="tab-accounts" class="unfocused">
                 <div class="card @low dark:~d_neutral accounts mb-4 overflow-visible">
-                    <div class="flex-expand align-middle">
-                        <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100">
-                            <div class="flex flex-row align-middle">
+                    <div id="accounts-filter-dropdown" class="dropdown manual z-10 w-100">
+                        <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="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
                                 <button class="button ~neutral @low center dropdown-manual-toggle" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button>
-                                <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
+                            </div>
+                            <div class="flex flex-row align-middle w-100">
+                                <input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
                                 <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none accounts-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
                             </div>
-                            <div class="dropdown-display max-w-full">
-                                <div class="card ~neutral @low mt-2 overflow-x-scroll" id="accounts-filter-list">
-                                    <p class="supra pb-2">{{ .strings.filters }}</p>
-                                </div>
+                        </div>
+                        <div class="dropdown-display max-w-full">
+                            <div class="card ~neutral @low mt-2 overflow-x-scroll" id="accounts-filter-list">
+                                <p class="supra pb-2">{{ .strings.filters }}</p>
                             </div>
                         </div>
                     </div>
@@ -793,20 +795,26 @@
             </div>
             <div id="tab-activity" class="unfocused">
                 <div class="card @low dark:~d_neutral activity mb-4 overflow-visible">
-                    <div class="flex-expand align-middle">
-                        <span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
-                        <div id="activity-filter-dropdown" class="dropdown z-10" tabindex="0">
-                            <span class="h-100 button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</span>
-                            <div class="dropdown-display">
-                                <div class="card ~neutral @low mt-2" id="activity-filter-list">
-                                    <p class="supra pb-2">{{ .strings.filters }}</p>
+                    <div id="activity-filter-dropdown" class="dropdown manual z-10 w-100" tabindex="0">
+                        <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="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
+                                <div class="flex flex-row align-middle">
+                                    <span class="button ~neutral @low center dropdown-manual-toggle" id="activity-filter-button">{{ .strings.filters }}</span>
+                                    <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
                                 </div>
                             </div>
+                            <div class="flex flex-row align-middle w-100">
+                                <input type="search" class="field ~neutral @low input search mr-2" id="activity-search" placeholder="{{ .strings.search }}">
+                                <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
+                                <button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
+                            </div>
+                        </div>
+                        <div class="dropdown-display max-w-full">
+                            <div class="card ~neutral @low mt-2 overflow-x-scroll" id="activity-filter-list">
+                                <p class="supra pb-2">{{ .strings.filters }}</p>
+                            </div>
                         </div>
-                        <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
-                        <input type="search" class="field ~neutral @low input search ml-2 mr-2" id="activity-search" placeholder="{{ .strings.search }}">
-                        <span class="button ~neutral @low center ml-[-2.64rem] rounded-s-none activity-search-clear" aria-label="{{ .strings.clearSearch }}" text="{{ .strings.clearSearch }}"><i class="ri-close-line"></i></span>
-                        <button class="button ~info @low ml-2" id="activity-refresh" aria-label="{{ .strings.refresh }}" disabled><i class="ri-refresh-line"></i></button>
                     </div>
                     <div class="flex flex-row justify-between py-2">
                         <div class="supra sm hidden" id="activity-search-options-header">{{ .strings.searchOptions }}</div>