From 7469ec7b9f4ec16f8d2e0d2c362b52a0840d8838 Mon Sep 17 00:00:00 2001
From: nessi <sascha@nesterovic.cc>
Date: Mon, 17 Aug 2026 19:40:14 +0200
Subject: [PATCH] feat: add mobile navigation hide rules for screens below
 700px with pointer-events and visibility overrides

Add media query to hide legacy-mobile-nav and mobile-drawer-open with display:none/visibility:hidden/pointer-events:none. Set mobile-nav-backdrop display:none and mobile-drawer-clone/mobile-drawer-shade pointer-events:none when not open
---
 templates/index.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/templates/index.html b/templates/index.html
index 9bfd64f..6176851 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,6 +2,9 @@
 <style>
 #ioPressurePanel{max-width:none;margin:0;padding:14px}.io-pressure-bars{display:grid;gap:10px}.io-pressure-bars>div{display:grid;grid-template-columns:42px 48px 1fr;align-items:center;gap:8px;color:#9da5b2;font-size:11px}.io-pressure-bars b{color:#e8eef5;text-align:right}.io-pressure-bars .datastore-progress{height:8px}.datastore-grid{align-items:stretch}.datastore-grid>.datastore-panel>.datastore-capacity{margin:0 0 12px;padding:14px}.datastore-right-stack{display:flex;flex-direction:column;gap:12px;min-height:100%}.datastore-right-stack .raid-panel{flex:1;margin:0}.datastore-right-stack #ioPressurePanel{flex:0 0 auto}@media(max-width:900px){ #ioPressurePanel{max-width:none}.datastore-right-stack{min-height:0}}
 </style>
+<style>
+@media(max-width:700px){.nav.legacy-mobile-nav,.nav.legacy-mobile-nav.mobile-drawer-open{display:none!important;visibility:hidden!important;pointer-events:none!important}body.mobile-nav-open .mobile-nav-backdrop{display:none!important}.mobile-drawer-clone:not(.open),.mobile-drawer-shade:not(.open){pointer-events:none!important}}
+</style>
 <script>
 document.addEventListener('DOMContentLoaded',()=>{const root=document.querySelector('#datastore');if(!root)return;const grid=root.querySelector('.datastore-grid');if(grid&&!document.querySelector('#ioPressurePanel')){const panel=document.createElement('section');panel.id='ioPressurePanel';panel.className='datastore-panel io-pressure-panel';panel.innerHTML='<div class="datastore-panel-head"><div><h3>I/O-Auslastung</h3><p>Festplatten-Druck aus Linux PSI</p></div><strong id="ioPressureLabel">Wird geladen …</strong></div><div class="io-pressure-bars"><div><span>Some</span><b id="ioPressureSome">—</b><div class="datastore-progress"><span id="ioPressureSomeBar"></span></div></div><div><span>Full</span><b id="ioPressureFull">—</b><div class="datastore-progress"><span id="ioPressureFullBar"></span></div></div></div>';grid.before(panel)}const pressure=async()=>{try{const data=await (await fetch('/api/datastore')).json();const io=data.io_pressure||{};const some=Number(io.some?.avg10)||0,full=Number(io.full?.avg10)||0;const level=Math.max(some,full),label=level>=20?'Hoch':level>=5?'Beobachten':'Normal';const set=(id,value)=>{const node=document.querySelector(id);if(node)node.textContent=value};set('#ioPressureLabel',io.available?`${label} · ${level.toFixed(1)}%`:'Nicht verfügbar');set('#ioPressureSome',`${some.toFixed(1)}%`);set('#ioPressureFull',`${full.toFixed(1)}%`);const a=document.querySelector('#ioPressureSomeBar'),b=document.querySelector('#ioPressureFullBar');if(a)a.style.width=`${Math.min(100,some)}%`;if(b)b.style.width=`${Math.min(100,full)}%`}catch(error){}};pressure();setInterval(pressure,5000);const disks=document.querySelector('#raidDisks');if(disks){const observer=new MutationObserver(()=>{if([...disks.querySelectorAll('.raid-disk')].some(row=>!row.querySelector('.raid-temperature')))setTimeout(pressure,0)});observer.observe(disks,{childList:true,subtree:true})}});
 </script>