From 57d950c1ca55fa59100dc00fbd8283b0142c1232 Mon Sep 17 00:00:00 2001
From: Ian Renton <ian@ianrenton.com>
Date: Sat, 1 Nov 2025 10:35:47 +0000
Subject: [PATCH] Fix search box appearance on mobile

---
 views/webpage_spots.tpl |  2 +-
 webassets/css/style.css | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/views/webpage_spots.tpl b/views/webpage_spots.tpl
index a152ca8..754d30c 100644
--- a/views/webpage_spots.tpl
+++ b/views/webpage_spots.tpl
@@ -16,7 +16,7 @@
             <p class="d-inline-flex gap-1">
                 <span style="position: relative;">
                     <i class="fa-solid fa-magnifying-glass" style="position: absolute; left: 0px; top: 2px; padding: 10px; pointer-events: none;"></i>
-                    <input id="filter-dx-call" type="text" class="form-control me-3" oninput="filtersUpdated();" placeholder="Search for call" style="max-width: 10em; padding-left: 2em;">
+                    <input id="filter-dx-call" type="text" class="form-control" oninput="filtersUpdated();" placeholder="Search for call">
                 </span>
                 <button id="filters-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleFiltersPanel();"><i class="fa-solid fa-filter"></i> Filters</button>
                 <button id="display-button" type="button" class="btn btn-outline-primary" data-bs-toggle="button" onclick="toggleDisplayPanel();"><i class="fa-solid fa-desktop"></i> Display</button>
diff --git a/webassets/css/style.css b/webassets/css/style.css
index f3ae3a9..32eff98 100644
--- a/webassets/css/style.css
+++ b/webassets/css/style.css
@@ -43,6 +43,12 @@ div.container {
 
 /* SPOTS/ALERTS PAGES, SETTINGS/STATUS AREAS */
 
+input#filter-dx-call {
+    max-width: 10em;
+    margin-right: 1rem;
+    padding-left: 2em;
+}
+
 div.appearing-panel {
     display: none;
 }
@@ -247,6 +253,10 @@ div.band-spot:hover span.band-spot-info {
         margin-left: -1em;
         margin-right: -1em;
     }
+    input#filter-dx-call {
+        max-width: 6em;
+        margin-right: 0;
+    }
 }
 
 @media (min-width: 992px) {