made the settings responsive via a dropdown menu

app/styles/Settings.css

@@ -240,4 +240,8 @@ input[type="radio"] {
     /* Make the option appear greyed out */
     pointer-events: none;
     /* Prevent clicks */
+}
+
+.dropdown{
+    display: none;
 }

app/styles/responsive.css

@@ -159,6 +159,24 @@
     background-image: url(../../public/img/logo-small.png);
     width: 4em;
   }
+
+  .sidebar{
+    width: 0%;
+    display: none;
+  }
+
+  .settings-main {
+    width: 80vw; /* Full width for main content */
+    margin: auto;
+    padding: auto;
+  }
+
+  .dropdown{
+    display: flex;
+    position: relative;
+    top: 10px;
+    display: block;
+  }
 }
 
 /* Responsive adjustments for the settings */
@@ -166,12 +184,4 @@
   .settings-content {
     flex-direction: column; /* Stack sidebar and main content on smaller screens */
   }
-
-  .sidebar {
-    width: 100%; /* Full width for sidebar */
-  }
-
-  .settings-main {
-    width: 100%; /* Full width for main content */
-  }
 }