Update mobile-menu.css

Signed-off-by: Andrew Harmel-Law <andrew@harmel-law.com>

Author: andrewharmellaw

site/assets/css/mobile-menu.css

@@ -103,61 +103,65 @@
   }
 }
 
-/* Fix for desktop layout overlap - make sidebar wider */
+/* Fix for desktop layout overlap - force sidebar to be wider */
 @media screen and (min-width: 769px) {
-  /* Increase sidebar width to accommodate content */
+  /* Force increase sidebar width to accommodate content */
   header {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 320px; /* Increased from 270px to fit the buttons */
-    padding: 50px 30px 50px 30px; /* Add more horizontal padding */
+    position: fixed !important;
+    left: 0 !important;
+    top: 0 !important;
+    width: 340px !important; /* Wider to fit buttons comfortably */
+    padding: 50px 20px !important;
   }
 
-  /* Add left margin to main content to match new sidebar width */
+  /* Force main content to move right to avoid overlap */
   .wrapper {
-    width: auto;
-    margin-left: 380px; /* Sidebar width (320px) + spacing (60px) */
-    margin-right: 50px;
-    padding-right: 20px;
-    max-width: none;
+    width: auto !important;
+    margin-left: 380px !important; /* Sidebar width + spacing */
+    margin-right: 50px !important;
+    padding-right: 20px !important;
+    max-width: none !important;
+  }
+  
+  /* Make sure sidebar content has room */
+  header .inner {
+    width: 100% !important;
   }
 }
 
 /* For medium-width screens */
 @media screen and (min-width: 769px) and (max-width: 1100px) {
   header {
-    width: 300px;
-    padding: 50px 25px 50px 25px;
+    width: 320px !important;
   }
 
   .wrapper {
-    margin-left: 350px;
-    margin-right: 30px;
+    margin-left: 360px !important;
+    margin-right: 30px !important;
   }
 }
 
 /* For very wide screens */
 @media screen and (min-width: 1400px) {
   .wrapper {
-    margin-left: 380px;
-    margin-right: 100px;
+    margin-left: 380px !important;
+    margin-right: 100px !important;
   }
 }
 
 /* Ensure mobile layout is unaffected */
 @media screen and (max-width: 768px) {
   header {
-    position: relative;
-    width: 100%;
-    padding: 20px;
+    position: relative !important;
+    width: 100% !important;
+    padding: 20px !important;
   }
 
   .wrapper {
-    width: auto;
-    margin: 0;
-    padding: 0 20px;
-    max-width: 100%;
+    width: auto !important;
+    margin: 0 !important;
+    padding: 0 20px !important;
+    max-width: 100% !important;
   }
 }