Update mobile-menu.css - still fiddling with widths

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

Author: andrewharmellaw

site/assets/css/mobile-menu.css

@@ -103,55 +103,62 @@
   }
 }
 
-/* Fix for desktop layout overlap */
+/* Fix for desktop layout overlap - make sidebar wider */
 @media screen and (min-width: 769px) {
-  /* Add left margin to the main wrapper to prevent overlap with sidebar */
+  /* 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 */
+  }
+  
+  /* Add left margin to main content to match new sidebar width */
   .wrapper {
     width: auto;
-    margin-left: 350px; /* Increased to give proper clearance */
+    margin-left: 380px; /* Sidebar width (320px) + spacing (60px) */
     margin-right: 50px;
     padding-right: 20px;
     max-width: none;
   }
-  
-  /* Ensure the header section stays fixed */
-  header {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 270px;
-  }
 }
 
-/* For medium-width screens (like your current window), still need good spacing */
+/* For medium-width screens */
 @media screen and (min-width: 769px) and (max-width: 1100px) {
+  header {
+    width: 300px;
+    padding: 50px 25px 50px 25px;
+  }
+  
   .wrapper {
-    margin-left: 340px; /* Still plenty of space */
+    margin-left: 350px;
     margin-right: 30px;
   }
 }
 
-/* For very wide screens, can add more right margin for better reading width */
+/* For very wide screens */
 @media screen and (min-width: 1400px) {
   .wrapper {
-    margin-left: 350px;
+    margin-left: 380px;
     margin-right: 100px;
   }
 }
 
 /* Ensure mobile layout is unaffected */
 @media screen and (max-width: 768px) {
+  header {
+    position: relative;
+    width: 100%;
+    padding: 20px;
+  }
+  
   .wrapper {
     width: auto;
     margin: 0;
     padding: 0 20px;
     max-width: 100%;
   }
-  
-  header {
-    position: relative;
-    width: 100%;
-  }
 }
 
 /* Fancy highlighter hyperlinks */