usability changes

public/calculators/subnet.js

@@ -53,9 +53,9 @@ export default {
           <label style="display: block; margin-bottom: 8px; font-weight: 500; color: var(--text);">
             CIDR Notation (Alternative)
           </label>
+          <span style="color: var(--muted); margin-right: 10px;">/</span>
           <input type="number" name="cidr" value="${s.cidr}" min="0" max="32" 
                  style="width: 200px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px;">
-          <span style="color: var(--muted); margin-left: 10px;">/</span>
         </div>
       </div>
     `;
@@ -97,6 +97,10 @@ export default {
     ipv6CidrLabel.style.cssText = 'display: block; margin-bottom: 8px; font-weight: 500; color: var(--text);';
     ipv6CidrLabel.textContent = 'CIDR Prefix Length';
     
+    const ipv6CidrSpan = document.createElement('span');
+    ipv6CidrSpan.style.cssText = 'color: var(--muted); margin-right: 10px;';
+    ipv6CidrSpan.textContent = '/';
+    
     const ipv6CidrInput = document.createElement('input');
     ipv6CidrInput.type = 'number';
     ipv6CidrInput.name = 'ipv6Cidr';
@@ -105,13 +109,9 @@ export default {
     ipv6CidrInput.max = '128';
     ipv6CidrInput.style.cssText = 'width: 200px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 16px;';
     
-    const ipv6CidrSpan = document.createElement('span');
-    ipv6CidrSpan.style.cssText = 'color: var(--muted); margin-left: 10px;';
-    ipv6CidrSpan.textContent = '/';
-    
     ipv6CidrContainer.appendChild(ipv6CidrLabel);
-    ipv6CidrContainer.appendChild(ipv6CidrInput);
     ipv6CidrContainer.appendChild(ipv6CidrSpan);
+    ipv6CidrContainer.appendChild(ipv6CidrInput);
     
     // Add all elements to IPv6 section
     ipv6Section.appendChild(ipv6AddressContainer);

public/css/styles.css

@@ -123,16 +123,20 @@ html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-u
     display: block;
   }
   
-  /* Add mobile overlay */
-  .sidenav::before {
-    content: '';
+  /* Mobile overlay - separate element */
+  .mobile-nav-overlay {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(0, 0, 0, 0.5);
-    z-index: -1;
+    z-index: 99;
+    display: none;
+  }
+  
+  .mobile-nav-overlay.active {
+    display: block;
   }
   
   /* Adjust main content spacing for mobile */

public/index.html

@@ -30,6 +30,9 @@
     <main id="view" class="content"></main>
   </div>
   
+  <!-- Mobile navigation overlay -->
+  <div id="mobileNavOverlay" class="mobile-nav-overlay"></div>
+
   <footer class="wrap foot">
     <div class="footer-content">
       <span>No tracking. No server. Everything runs in your browser.</span>

public/js/app.js

@@ -21,17 +21,30 @@ const navEl   = document.getElementById('nav');
 const viewEl  = document.getElementById('view');
 const themeBtn= document.getElementById('themeToggle');
 const navToggleBtn = document.getElementById('navToggle');
+const mobileNavOverlay = document.getElementById('mobileNavOverlay');
 initTheme(themeBtn);
 
 // Mobile navigation toggle
 navToggleBtn.addEventListener('click', () => {
   navEl.classList.toggle('mobile-active');
+  mobileNavOverlay.classList.toggle('active');
+});
+
+// Close mobile nav when clicking overlay
+mobileNavOverlay.addEventListener('click', () => {
+  navEl.classList.remove('mobile-active');
+  mobileNavOverlay.classList.remove('active');
 });
 
 // Close mobile nav when clicking outside
 document.addEventListener('click', (e) => {
-  if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
-    navEl.classList.remove('mobile-active');
+  // Only close if nav is currently open
+  if (navEl.classList.contains('mobile-active')) {
+    // Close if clicking outside both nav and toggle button
+    if (!navEl.contains(e.target) && !navToggleBtn.contains(e.target)) {
+      navEl.classList.remove('mobile-active');
+      mobileNavOverlay.classList.remove('active');
+    }
   }
 });
 
@@ -40,6 +53,7 @@ navEl.addEventListener('click', (e) => {
   const a = e.target.closest('a[data-calc]');
   if (a) {
     navEl.classList.remove('mobile-active');
+    mobileNavOverlay.classList.remove('active');
   }
 });