From b126046c9400e22b9009fa748582f4e83f960eae Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Sat, 8 Mar 2025 14:20:13 +0000
Subject: [PATCH] [frontend]: Make CSS more responsive for small screens

---
 frontend/src/App.jsx                       | 4 +++-
 frontend/src/components/LoadingOverlay.jsx | 2 +-
 frontend/src/components/Sidebar.jsx        | 6 +++---
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 5396588..8d26aca 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -303,7 +303,9 @@ function App() {
             <div
                 style={{
                     position: "absolute",
-                    top: "10px",
+                    top: "1vh",
+                    height: "5vh",
+                    width: "250px", minWidth: "50px",
                     left: "50%",
                     transform: "translateX(-50%)",
                     zIndex: 1000
diff --git a/frontend/src/components/LoadingOverlay.jsx b/frontend/src/components/LoadingOverlay.jsx
index cb0ba05..23f51aa 100644
--- a/frontend/src/components/LoadingOverlay.jsx
+++ b/frontend/src/components/LoadingOverlay.jsx
@@ -5,7 +5,7 @@ const LoadingOverlay = ({ message }) => (
     <div style={{
         position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
         background: "rgba(0, 0, 0, 0.5)", display: "flex",
-        alignItems: "center", justifyContent: "center",
+        alignItems: "center", justifyContent: "center", textAlign: "center",
         color: "white", fontSize: "20px", fontWeight: "bold",
         zIndex: 1000
     }}>
diff --git a/frontend/src/components/Sidebar.jsx b/frontend/src/components/Sidebar.jsx
index ad14e9b..becca80 100644
--- a/frontend/src/components/Sidebar.jsx
+++ b/frontend/src/components/Sidebar.jsx
@@ -132,7 +132,7 @@ const CheckboxItem = ({ item, selectedSources, setSelectedSources, enabledSource
 };
 
 const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setClusteringEnabled, fetchData }) => {
-    const [isOpen, setIsOpen] = useState(true);
+    const [isOpen, setIsOpen] = useState(false);
     const [enabledSources, setEnabledSources] = useState([]);  // New state to track enabled sources
 
     // Load selected sources from cookies or set all as default checked
@@ -153,11 +153,11 @@ const Sidebar = ({ selectedSources, setSelectedSources, clusteringEnabled, setCl
 
     return (
         <div style={{
-            position: "absolute", top: "10px", right: "10px",
+            position: "absolute", top: window.innerWidth < 900 ? "8vh" : "1vh", 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",
-            height: isOpen ? "auto" : "40px", display: "flex", flexDirection: "column",
+            height: isOpen ? "auto" : "5vh", display: "flex", flexDirection: "column",
             alignItems: "center", zIndex: 1000, overflow: "hidden", justifyContent: "center"
         }}>
             <button onClick={() => setIsOpen(!isOpen)} style={{ background: "none", border: "none", color: "black" }}>