/* ===================================================================== ShotGram · safe-area.css v78.0 Loaded AFTER styles.css. Nothing in styles.css was deleted — this file supersedes the scattered env(safe-area-inset-*) rules with the single resolved set published by js/sg-safearea.js. Requirements covered: 1, 2, 16, 27, 28, 29. ===================================================================== */ :root { /* Fallbacks for the first frames, before sg-safearea.js publishes real values, and for any browser where JS is still parsing. env() with a 0px default keeps this correct on desktop. */ --sa-t: env(safe-area-inset-top, 0px); --sa-r: env(safe-area-inset-right, 0px); --sa-b: env(safe-area-inset-bottom, 0px); --sa-l: env(safe-area-inset-left, 0px); /* Derived chrome heights. Use these instead of re-adding --bar-h by hand. */ --sa-top-h: calc(var(--top-h) + var(--sa-t)); --sa-bottom-h: calc(var(--bar-h) + var(--sa-b)); /* Side gutter that already accounts for a landscape notch. */ --sa-gutter-l: max(12px, var(--sa-l)); --sa-gutter-r: max(12px, var(--sa-r)); } /* ------------------------------------------------------------------ * 1 · Header (requirement 2) The original .topbar set `padding-top: env(safe-area-inset-top)` and then, four lines later, `padding: 0 12px` — the shorthand reset the top padding back to zero. The bar reserved the right HEIGHT but centred its contents inside the full box, which is why the logo and the LIVE pill sat under the Dynamic Island on every notch iPhone while the layout looked correct in a desktop simulator. * ------------------------------------------------------------------ */ .topbar { height: var(--sa-top-h); padding: var(--sa-t) var(--sa-gutter-r) 0 var(--sa-gutter-l); align-items: center; } /* Keep the row itself vertically centred in the area BELOW the inset. */ .topbar > * { align-self: center; } .offline-banner { padding-top: calc(7px + var(--sa-t)); padding-left: var(--sa-gutter-l); padding-right: var(--sa-gutter-r); } /* ------------------------------------------------------------------ * 2 · Scroll body and tab bar * ------------------------------------------------------------------ */ .screen { padding-bottom: calc(var(--bar-h) + 22px + var(--sa-b)); padding-left: var(--sa-l); padding-right: var(--sa-r); min-height: calc(100dvh - var(--sa-top-h)); } .screen.full { padding: 0; } .tabbar { height: var(--sa-bottom-h); padding-bottom: var(--sa-b); padding-left: var(--sa-l); padding-right: var(--sa-r); } /* ------------------------------------------------------------------ * 3 · Overlays, sheets, modals, dialogs (requirement 1) * ------------------------------------------------------------------ */ .sheet { padding-bottom: calc(20px + var(--sa-b)); max-height: calc(84dvh - var(--sa-t)); } .sheet-backdrop, .modal-backdrop { padding-top: var(--sa-t); padding-bottom: var(--sa-b); padding-left: var(--sa-l); padding-right: var(--sa-r); } .modal { max-height: calc(100dvh - var(--sa-t) - var(--sa-b) - 32px); } .company-overlay, .call-overlay, .photo-lightbox, .studio-overlay { padding-top: var(--sa-t); padding-bottom: var(--sa-b); padding-left: var(--sa-l); padding-right: var(--sa-r); box-sizing: border-box; } .photo-lightbox-close { top: calc(16px + var(--sa-t)); inset-inline-end: calc(16px + var(--sa-r)); } .emoji-panel.sheet-mode { padding-bottom: calc(8px + var(--sa-b)); } .toast { bottom: calc(var(--bar-h) + 20px + var(--sa-b)); max-width: min(420px, calc(100% - 28px - var(--sa-l) - var(--sa-r))); } /* ------------------------------------------------------------------ * 4 · Auth screens (Login / Sign up — requirements 1, 2, 3) * ------------------------------------------------------------------ */ .auth { padding-top: calc(32px + var(--sa-t)); padding-bottom: calc(40px + var(--sa-b)); padding-left: max(20px, var(--sa-l)); padding-right: max(20px, var(--sa-r)); } .auth-layout { padding: 0; } .auth-layout .auth-panel { padding-top: max(clamp(28px, 5vw, 72px), calc(var(--sa-t) + 18px)); padding-bottom: max(clamp(28px, 5vw, 72px), calc(var(--sa-b) + 18px)); padding-left: max(clamp(26px, 5vw, 72px), var(--sa-l)); padding-right: max(clamp(26px, 5vw, 72px), var(--sa-r)); } .auth-layout .auth-visual { padding-top: max(34px, calc(var(--sa-t) + 14px)); } /* Requirement 3 — the Windows installer card must never render inside a packaged mobile app. Hidden in CSS as well as skipped in JS so that a cached auth.js can never reintroduce it in an App Store build. */ html.sg-native .desktop-download-card, html.sg-ios .desktop-download-card, html.sg-android .desktop-download-card, html.sg-native [data-platform-only="desktop"], html.sg-ios [data-platform-only="desktop"], html.sg-android [data-platform-only="desktop"] { display: none !important; } /* ------------------------------------------------------------------ * 5 · Chat, rooms, composers * ------------------------------------------------------------------ */ .room-head { padding-top: calc(10px + var(--sa-t)); } .room-bar, .clan-composer, .story-compose-bar { padding-bottom: calc(10px + var(--sa-b)); padding-left: max(12px, var(--sa-l)); padding-right: max(12px, var(--sa-r)); } .docs { padding-bottom: calc(28px + var(--sa-b)); } /* ------------------------------------------------------------------ * 6 · LIVE * ------------------------------------------------------------------ */ .live-top-row, .live-watch-top { padding-top: calc(12px + var(--sa-t)); } .live-control-panel { padding-bottom: calc(16px + var(--sa-b)); } .live-discover { padding-top: calc(12px + var(--sa-t)); padding-bottom: calc(24px + var(--sa-b)); padding-left: max(13px, var(--sa-l)); padding-right: max(13px, var(--sa-r)); } .live-watch-shell { padding-bottom: calc(18px + var(--sa-b)); } /* The emoji button was removed from this row in v78, leaving three children in a two-column grid — the send button wrapped onto a second row. */ .live-chat-form { padding-bottom: calc(9px + var(--sa-b)); grid-template-columns: minmax(0, 1fr) 38px 38px; align-items: center; } .live-battle-bar { top: calc(120px + var(--sa-t)); } .live-battle-opponent { top: calc(175px + var(--sa-t)); } .live-host-card { inset-inline-start: max(14px, var(--sa-l)); inset-inline-end: max(14px, var(--sa-r)); } .live-social-rail { inset-inline-end: max(10px, var(--sa-r)); } /* ------------------------------------------------------------------ * 7 · Reels * ------------------------------------------------------------------ */ body.reels-open .reel-rail { bottom: calc(var(--bar-h) + 18px + var(--sa-b)); } body.reels-open .reel-info { bottom: calc(var(--bar-h) + 14px + var(--sa-b)); } body.reels-open .reel-volume { top: calc(16px + var(--sa-t)); } /* ------------------------------------------------------------------ * 8 · Voice dock * ------------------------------------------------------------------ */ #persistentVoice:not(:empty) { left: max(12px, calc(var(--sa-l) + 4px)); bottom: calc(72px + var(--sa-b)); width: min(330px, calc(100vw - 24px - var(--sa-l) - var(--sa-r))); } .voice-dock.expanded .voice-dock-head { padding-top: max(14px, var(--sa-t)); } /* ------------------------------------------------------------------ * 9 · Reusable utilities for any new screen * ------------------------------------------------------------------ */ .sg-safe-top { padding-top: var(--sa-t); } .sg-safe-bottom { padding-bottom: var(--sa-b); } .sg-safe-x { padding-left: var(--sa-l); padding-right: var(--sa-r); } .sg-safe-all { padding-top: var(--sa-t); padding-bottom: var(--sa-b); padding-left: var(--sa-l); padding-right: var(--sa-r); } .sg-safe-height { min-height: calc(100dvh - var(--sa-t) - var(--sa-b)); } /* ------------------------------------------------------------------ * 10 · Floating clamp (requirements 27, 28) `translate` is a standalone property, so an element that already carries `transform: translateX(-50%)` (every toast does) keeps it and simply gets the correction composed on top. Rewriting `transform` here would have silently un-centred every toast in the app. * ------------------------------------------------------------------ */ .sg-clamped { translate: var(--sg-dx, 0px) var(--sg-dy, 0px); } .toast, .voice-dock, .live-host-card, .live-battle-bar, .note-preview-bubble, .sg-float { max-width: calc(100vw - var(--sa-l) - var(--sa-r) - 16px); } /* ------------------------------------------------------------------ * 11 · Zoom and screen-movement guard (requirement 16) ROOT CAUSE: styles.css sets `font-size: 15px` on html/body, and `button, input, textarea, select { font: inherit }` passes that straight to every field. iOS Safari and WKWebView auto-zoom the page whenever a focused field is under 16px, then leave the page scrolled and scaled — which is the "tapping moves the screen" report. 16px on coarse pointers removes the cause instead of fighting the symptom. * ------------------------------------------------------------------ */ @media (pointer: coarse) { /* !important is deliberate and audited. styles.css sets the field size in several places with two-class selectors (.live-chat-form .input at 12px, .room-bar #msgInput, the search field) that a plain override cannot beat. Every one of them was BELOW 16px — a survey of the file found no input above 16px — so nothing is being visually shrunk here, only raised to the threshold that stops WebKit auto-zooming. */ input, textarea, select, .input, .input.area, .input.bare, [contenteditable="true"] { font-size: 16px !important; } /* Keep the visual rhythm the 15px design had, without dropping below the zoom threshold. */ .input { line-height: 1.35; } } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Kill double-tap zoom on controls while leaving scrolling, swiping, pinch on media and assistive gestures alone. */ button, a, [role="button"], .btn, .tabbar > *, .live-round-btn, .sheet-item, .link-btn, .password-toggle, label { touch-action: manipulation; } /* Inside the packaged app only: no page-level pinch zoom. iOS and Android both provide system-wide magnification under Accessibility, so nothing is lost, and this is what stops the layout drifting after a stray two-finger touch. On the web the browser's zoom is untouched. */ html.sg-native, html.sg-native body { touch-action: pan-x pan-y; overscroll-behavior: none; } /* Deliberately NOT switching the scroll container to here. That is the usual "fix" for WebView rubber-banding, but it moves the scrolling element out from under window.scrollTo/scrollY and quietly breaks every restore- scroll-position call in the router. overscroll-behavior alone stops the bounce without that cost. */ /* Media must keep its own gestures. */ video, .live-stage, .live-watch-player, .photo-lightbox img, [data-allow-doubletap] { touch-action: auto; } /* ------------------------------------------------------------------ * 12 · Keyboard-aware composers sg-safearea.js adds .sg-keyboard-open to and publishes --kb-h. When the keyboard is up the bottom inset is already consumed by it, so adding the home-indicator inset again pushes the send button off screen. * ------------------------------------------------------------------ */ html.sg-keyboard-open { --sa-b: 0px; } html.sg-keyboard-open .tabbar { display: none; } /* ------------------------------------------------------------------ * 13 · Landscape (requirement 29) * ------------------------------------------------------------------ */ @media (orientation: landscape) { .topbar { padding-left: var(--sa-gutter-l); padding-right: var(--sa-gutter-r); } .screen { padding-left: var(--sa-l); padding-right: var(--sa-r); } .live-watch-shell, .live-discover, .auth { padding-left: max(14px, var(--sa-l)); padding-right: max(14px, var(--sa-r)); } } /* ------------------------------------------------------------------ * 14 · Small phones (SE / 5.4") — requirement 29 * ------------------------------------------------------------------ */ @media (max-width: 380px) { :root { --top-h: 52px; --bar-h: 54px; } .auth-layout .auth-panel { padding-left: max(16px, var(--sa-l)); padding-right: max(16px, var(--sa-r)); } }