/* Public / portal / auth pages — responsive/zoom fixes (Chris 2026-06-23) */ /* Scope notes ----------- These rules target the PUBLIC / SEPARATE-LAYOUT pages only — the ones that do NOT use layouts/master or layouts/admin_master: 1. layouts/front.blade.php -> (auth/login, auth/welcome, auth/forgot_password*, public_page/*) 2. leads_portal/layout.blade.php -> public portal funnel (landing/login/signup) (uses the .p-* class namespace) 3. leads_portal/app_layout.blade.php-> logged-in portal (dashboard) — .app shell, styled by /css/leads_portal/leadflow.css Every rule below is namespaced to a page/body/wrapper class so it cannot bleed into the master/admin layouts. Additive only — no existing rule is modified. `!important` is used ONLY where it must beat an inline style attribute on the element (noted inline). Breakpoints mirror the conventions used elsewhere in /css/responsive/ : 1200 / 992 / 768. */ /* ===================================================================== 1) layouts/front.blade.php — auth/login + auth/welcome --------------------------------------------------------------------- REMOVED 2026-06-23: the responsive rules here (flex-wrap + the ≤992px stacking) regressed the normal login layout, so the front/auth pages are left at their original styling. If the login ever needs zoom-proofing, redo it against a live render — not blind. (Chris) ===================================================================== */ /* ===================================================================== 2) leads_portal/layout.blade.php — public funnel (.p-* namespace) --------------------------------------------------------------------- The base layout is already fluid (clamp headings, max-width containers, media queries). Remaining zoom risk is in the page-level grids defined in each page's @section('page_styles') — the multi-column grids only collapse at 920/720, so at ~125-150% zoom (effective ~1000-1100px) the 4-up stats / industries / services rows get cramped before their breakpoint hits. Add an intermediate 1200px step and guarantee no child overflows. ===================================================================== */ /* Belt-and-suspenders: nothing in the funnel should push horizontal scroll. */ .p-nav-inner, .p-container, .p-footer-inner { max-width: 100%; } /* Intermediate collapse so 4-up rows don't stay 4-up at high zoom. */ @media (max-width: 1200px) { .p-hero-grid { grid-template-columns: 1fr 1fr; } .p-stats-grid { grid-template-columns: repeat(2, 1fr); } .p-industries { grid-template-columns: repeat(2, 1fr); } .p-services { grid-template-columns: repeat(2, 1fr); } } /* Pricing two-up can get tight too — give it the same intermediate step. */ @media (max-width: 992px) { .p-pricing { grid-template-columns: 1fr; } .p-steps { grid-template-columns: 1fr; } } /* Footer bottom row (copyright | links) is justify-between with no wrap — let it wrap so the links don't overflow at zoom. */ .p-footer-bottom { flex-wrap: wrap; gap: 12px; } /* signup.blade.php two-field row collapses at 540 already; add a safety min-width:0 so long inputs/labels can't force overflow before that. */ .sw-row > * { min-width: 0; } /* ===================================================================== 3) leads_portal/app_layout.blade.php — logged-in dashboard (leadflow.css; .app shell) --------------------------------------------------------------------- leadflow.css collapses the sidebar + grids only at 1100/820. At 125-175% zoom the effective viewport drops below those before the layout reacts, so: - the 248px sidebar + content can overflow, - the 4-up .stats stays 4-up, - the inbox `380px 1fr` two-pane is too tight, - the .warehouse table is clipped (parent has overflow:hidden) and the cells are white-space:nowrap, so columns get cut off with no scroll. We add a 1200px intermediate step and make the table horizontally scrollable instead of clipped. ===================================================================== */ /* The lead table cells are nowrap and the wrapper clips (overflow:hidden), so wide tables get cut off. Allow horizontal scroll within the card. */ .app .warehouse { overflow-x: auto; -webkit-overflow-scrolling: touch; } .app .lead-table { min-width: 720px; /* keeps columns readable; card scrolls instead of clipping */ } @media (max-width: 1200px) { /* Collapse the dense top-level grids one step earlier than leadflow's 1100. */ .app .stats { grid-template-columns: repeat(2, 1fr); } .app .market-grid { grid-template-columns: repeat(2, 1fr); } /* Inbox two-pane (380px list + thread) is too tight; stack it. */ .app .inbox { grid-template-columns: 1fr; } .app .inbox-list { border-right: 0; border-bottom: 1px solid var(--line); } } @media (max-width: 992px) { /* Below ~150% zoom on a laptop: switch sidebar to the icon-rail early (leadflow only does this at 820) so the content area keeps room. */ .app { grid-template-columns: 64px 1fr; } .app .brand-name, .app .nav-item span:not(.badge), .app .sidebar-footer .uinfo, .app .nav-label { display: none; } .app .nav-item { justify-content: center; } /* Generic two-up content grids -> single column. */ .app .market-grid, .app .grid-2, .app .field-row, .app .settings-grid, .app .kv-grid, .app .role-grid, .app .integration-grid { grid-template-columns: 1fr; } } /* Fixed-column "row" grids (invoice/delivery/bid/header/map) only collapse at 920 in leadflow. Let their flexible tracks shrink and prevent cell overflow so they don't blow out the card between breakpoints. min-width:0 on grid children lets long text ellipsis/wrap instead of forcing width. */ .app .invoice-row > *, .app .delivery-row > *, .app .header-row > *, .app .map-row > * { min-width: 0; }