fix: main-content disappearing on mobile

Changed the sidebar to not cover the main-content on screen widths bellow 768px.
I'm not sure why this was chosen as the min width elsewhere, but i will follow it.

Author: tye-exe

frontend/src/index.css

@@ -9,11 +9,17 @@ body {
 }
 
 .sidebar {
-  min-height: calc(100vh - 56px);
   background-color: #343a40;
   padding-top: 20px;
 }
 
+/* The "min-width" comes from the "min-width" media attribute on "main-content" */
+@media (min-width: 768px) {
+  .sidebar {
+    min-height: calc(100vh - 56px);
+  }
+}
+
 /* Removed color and background styles as they are set inline in Sidebar.js */
 /* Kept basic layout and transition styles */
 .sidebar .nav-link {