/** * iOS / touch-device compatibility layer * ============================================================================= * Cross-cutting fixes for iPhone and iPad Safari that no single page owns. * Everything here is additive and safe on desktop — it either sits behind a * touch/width media query or restates a property Safari needs spelled out. * * Load this LAST in on every page that a student, lecturer or admin can * reach from a phone. * * @version 1.0.0 */ /* ----------------------------------------------------------------------------- 1. Stop Safari zooming the page when a form control is focused. iOS zooms in whenever the focused control's font-size is under 16px, then leaves the viewport scrolled sideways — the single most common "the portal is broken on my iPhone" report. 16px is already the body size, so nothing shifts visually; only the sub-16px controls change. -------------------------------------------------------------------------- */ @media (max-width: 900px) { input, select, textarea, .form-control, .form-select, .form-input { font-size: 16px !important; } /* Date/time inputs additionally need a real height on iOS or they collapse to the text height and become hard to tap. */ input[type="date"], input[type="time"], input[type="datetime-local"] { min-height: 44px !important; } } /* ----------------------------------------------------------------------------- 2. Tap behaviour. - the grey flash Safari paints over every tapped element is replaced with the portal's own subtle tint - `touch-action: manipulation` removes the 300ms double-tap-to-zoom delay on controls, so buttons feel native -------------------------------------------------------------------------- */ a, button, label, summary, [role="button"], input, select, textarea { -webkit-tap-highlight-color: rgba(0, 46, 93, 0.12); } a, button, .btn, [role="button"], .nav-link, .mobile-menu-toggle, .profile-trigger, .notification-bell, .message-bell { touch-action: manipulation; } /* ----------------------------------------------------------------------------- 3. Safari inflates text in landscape unless told not to. -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ----------------------------------------------------------------------------- 4. Scroll containment for the overlay surfaces. Without this, flicking past the end of the sidebar drawer or a dropdown scrolls the page underneath it (and on iOS drags the whole document). -------------------------------------------------------------------------- */ #sidebar, .notification-dropdown, .profile-dropdown, .modal-content, .table-container { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ----------------------------------------------------------------------------- 5. Wide content must scroll inside its own box, never the page. A table that overflows the viewport makes every fixed element on an iPhone scroll sideways with it, which is what breaks the header alignment. -------------------------------------------------------------------------- */ @media (max-width: 768px) { html, body { overflow-x: hidden; -webkit-overflow-scrolling: touch; } .table-container, .table-responsive { overflow-x: auto !important; max-width: 100% !important; } /* Long unbroken strings (emails, file names, tokens) must not widen the page on a 320px screen. */ td, th, .card p, .dashboard-section p { overflow-wrap: break-word; word-break: break-word; } } /* ----------------------------------------------------------------------------- 6. Touch devices keep :hover styling stuck after a tap. Where a hover state only decorates (lift/scale), neutralise it on touch-only pointers so a tapped card doesn't stay raised. -------------------------------------------------------------------------- */ @media (hover: none) { .card:hover, .futuristic-card:hover, .stat-card:hover { transform: none; } }