/* mobile-safety.css — universal horizontal-overflow guards. * * Loaded automatically on every HTML response by the after_request hook * in app/__init__.py. All rules are scoped to <=768px, so desktop layouts * are completely untouched. * * Why this file exists: many templates in this repo were built desktop- * first and are standalone (each has its own rather than extending * a shared base). Rather than retrofit dozens of templates individually, * this single file catches the most common causes of horizontal overflow * — wide tables, oversized images, long unbreakable strings, hardcoded * pixel widths — across the whole app, including admin/dashboard pages. * * Edit this file (NOT individual templates) when you find a new mobile * overflow culprit. Add new rules; never remove rules without testing * desktop and the affected page. */ @media (max-width: 768px) { /* 1. Last-resort viewport guard. If anything we missed tries to push past the viewport, the browser clips it cleanly instead of letting the whole page side-scroll. Slight clipping > broken layout. */ html, body { max-width: 100vw; overflow-x: hidden; } /* 2. Media — the single biggest overflow source. Hard cap at container width and let height scale naturally. !important defeats per-template inline width attributes that pre-date responsive design. */ img, video, iframe, embed, object { max-width: 100% !important; height: auto; } /* SVGs are special: many in this repo have explicit width/height attributes that we want to keep on desktop (icon sizing). Cap them to viewport so dashboard charts don't push the page wider. */ svg { max-width: 100%; } /* 3. Tables — convert to horizontally scrollable blocks at small widths. The table keeps its layout; only the table itself scrolls sideways, not the whole page. Affects every in admin and dashboard views (audit logs, call history, alert grids). */ table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 4. Code/pre blocks — wrap long lines instead of letting them spill. Useful for transcript views, debug payloads, JSON inspector output. */ pre, code, kbd, samp { max-width: 100%; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word; overflow-x: auto; } /* 5. Long-string breaking for any element that might contain user data — emails, URLs, transcripts, alert messages. `anywhere` is more aggressive than `break-word`: it'll break inside long unbroken runs (an email like very_long_address@checkwellcall.com) instead of letting them push the layout. Regular prose still wraps at word boundaries. Includes div because dashboard headers (`
`) commonly hold the user's email/name as raw text. */ p, h1, h2, h3, h4, h5, h6, span, li, td, th, a, blockquote, dt, dd, div, label { overflow-wrap: anywhere; word-wrap: break-word; } /* 6. Layout containers — many templates have `width: 1024px` style hardcoded widths from desktop-first builds. Cap them and let the browser fit-to-viewport. */ .container, .container-fluid, .content-wrapper, .main-content, .dashboard, .dashboard-container, .admin-content, .admin-section, .admin-main, .page-content, main { max-width: 100%; box-sizing: border-box; } /* 7. Form controls — Twilio-style "phone number input" widgets and date pickers sometimes ship with desktop-pixel widths. */ input, textarea, select, button { max-width: 100%; box-sizing: border-box; } /* 8. Cards / grids — flex and grid children have an implicit `min-width: auto` that prevents them from shrinking below their content's intrinsic size. On mobile, that causes cards holding long content (an email, a chart, a wide table) to push their parent past the viewport. Forcing `min-width: 0` lets them shrink properly; `max-width: 100%` keeps them in their lane. */ .card, .stat-card, .metric-card, .info-card, .dashboard-card, .header-card, .header-content, .header-info, .header-actions, .main-content, .sidebar, .container { max-width: 100%; min-width: 0; } /* 9. Admin/dashboard CSS Grid layouts that use `repeat(auto-fit, minmax(500px, 1fr))` patterns will overflow at 375px because each track demands at least 500px. Force these into single-column on narrow viewports. The grid names below come from a static scan of templates/admin/*.html — extend this list when a new grid class shows up. */ .metrics-grid, .charts-grid, .filter-grid, .stats-grid, .quality-grid, .sentiment-grid, .agents-grid, .ai-performance-grid, .compliance-grid, .alerts-grid, .add-contact-row, .pricing-grid, .pricing-tiers-grid, .features-grid, .stats-row { grid-template-columns: 1fr !important; } /* Admin dashboard chart cards have `padding: 30px` which eats 60px of horizontal space on a 375px viewport (so a card that thinks it's 100% wide is actually pushing 60px past). Plus chart-container has a fixed `height: 300px` but no max-width, and Chart.js renders into it at the canvas's natural size. Cap widths and trim padding. */ .chart-section, .chart-container, .stats-row > div, canvas { max-width: 100%; box-sizing: border-box; } .chart-section { padding: 16px !important; } /* 10. Inline-style grids — admin pages frequently use `
` which beats every class-based rule because inline styles win the cascade. Force any inline grid declaration to single column at phone widths so MaxCare price cards / SEO stat tiles / mood bars don't push past the viewport. Targets the [style*="..."] attribute selector with !important so it actually overrides the inline value. */ [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } /* 11. Inline-style flex rows without flex-wrap — admin headers stack a notification bell + date-range dropdown + caregiver view link + logout button on one line. At 375px those four items can't fit, so the flex container pushes past the viewport. Forcing flex-wrap lets them break onto multiple rows. Safe on desktop because the rule is gated by the @media block. */ [style*="display: flex"]:not([style*="flex-wrap"]), [style*="display:flex"]:not([style*="flex-wrap"]) { flex-wrap: wrap !important; } }