From 994087829d1c6688a613d4d5ce37492defb21fee Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Wed, 12 Mar 2025 22:31:20 +0000
Subject: [PATCH] [frontend]: Fix filters / search bar overlapping on mobile

---
 frontend/src/App.jsx                | 45 +++++++++++++++--------------
 frontend/src/components/Sidebar.jsx |  2 +-
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 2165beb..962d221 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -379,30 +379,31 @@ function App() {
                     path="/"
                     element={
                         <div style={{ height: "100vh", width: "100vw", display: "flex", position: "relative", paddingTop: "5vh" }}>
-                            {loading && <LoadingOverlay message={"Loading data..."} />} <div
-                            style={{
-                                position: "absolute",
-                                top: "1vh",
-                                height: "5vh",
-                                width: "250px", minWidth: "50px",
-                                left: "50%",
-                                transform: "translateX(-50%)",
-                                zIndex: 1000
-                            }}
-                        >
-                            <input
-                                type="text"
-                                onChange={(e) => handleSearchChange(e)}
-                                placeholder="Search..."
+                            {loading && <LoadingOverlay message={"Loading data..."} />}
+                            <div
                                 style={{
-                                    width: "250px", fontSize: "16px",
-                                    top: "6vh", marginTop: "5vh",
-                                    padding: "10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
-                                    borderRadius: "10px", overflow: "hidden"
+                                    position: "absolute",
+                                    top: "1vh",
+                                    height: "5vh",
+                                    width: "250px", minWidth: "50px",
+                                    left: "50%",
+                                    transform: "translateX(-50%)",
+                                    zIndex: 1000,
+                                    ...(window.innerWidth < 800 ? { top: "auto", bottom: "10vh" } : {})
                                 }}
-                            />
-                        </div>
-
+                            >
+                                <input
+                                    type="text"
+                                    onChange={(e) => handleSearchChange(e)}
+                                    placeholder="Search..."
+                                    style={{
+                                        width: "250px", fontSize: "16px",
+                                        top: "6vh", marginTop: "5vh",
+                                        padding: "10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
+                                        borderRadius: "10px", overflow: "hidden"
+                                    }}
+                                />
+                            </div>
                             <Sidebar
                                 selectedSources={selectedSources}
                                 setSelectedSources={setSelectedSources}
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index ee22551..6692091 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -161,7 +161,7 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
 
     return (
         <div style={{
-            position: "absolute", top: window.innerWidth < 900 ? "8vh" : "6vh", right: "1vh",
+            position: "absolute", top: "6vh", right: "1vh",
             width: "250px", minWidth: "50px",
             padding: isOpen ? "10px" : "5px 10px", background: "rgba(255, 255, 255, 0.9)", color: "black",
             borderRadius: "10px", transition: "height 0.2s ease-in-out, padding 0.2s ease-in-out",