/* ================================================================== JetStream Live — MOBILE SHELL ------------------------------------------------------------------ Loaded by every page. Everything here is inside a max-width query, so the desktop site is completely untouched. The problem this solves: the desktop .nav-bar is a flex row of 8 items with white-space:nowrap. On a phone it is wider than the screen, which forces the WHOLE page wider than the viewport. That is why content was cut off on the left with dead space on the right. A desktop nav squeezed onto a phone is also the single clearest "this is a website" signal. The fix: hide it on mobile and replace it with a bottom tab bar plus a drawer for everything else, which is the standard mobile app layout. ================================================================== */ :root{ --jsl-tabbar-h:56px; } @media(max-width:900px){ /* ---- kill the desktop nav and the overflow it causes ---- */ /* app.html uses a bare