/* ============================================================ HR Strategix — shared mobile fixes Loaded by every shell page and injected into all five tools. Deliberately narrow in scope: this file only contains fixes that are correct for ANY of the five tools. Anything specific to one app belongs in that app's own stylesheet, not here. Everything is inside a max-width query. Desktop is untouched. ============================================================ */ /* Stop iOS/Android silently inflating text in rotated or narrow layouts. Has to sit outside the media query to apply at all. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (max-width: 767px) { /* -------------------------------------------------------- Wide tables scroll inside their own box on a phone. The tablet layer below has had this since August; the PHONE layer never did, so a table wider than the screen widened the document instead and every other page element came along with it. Scoped to the wrapper, never to bare `table`: a rule on `table` would silently change every existing admin table's behaviour, and `overflow-x` on a `display: table` element is not reliably honoured anyway. Wrapping is opt-in, per table, at the call site. -------------------------------------------------------- */ .table-wrap, .hrx-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* -------------------------------------------------------- 1. Never let a focused field zoom the page. Safari zooms whenever you focus an input whose font is under 16px, and it does not zoom back out afterwards — you are left scrolled sideways in a form. 16px is the threshold, not a preference; 15.9px still zooms. Applied with a bare element selector so it loses to any app rule that deliberately sets a size, and !important is avoided on purpose — a tool that needs a different size on a specific field can still say so. -------------------------------------------------------- */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { /* !important is deliberate and is limited to this one property. Several tools set an explicit font-size on their fields with a more specific selector, which beat a bare `input {}` rule and left the zoom bug in place in three of the five apps. A field that zooms the page on focus is always wrong, so this one has to win. Nothing else in this file uses !important. */ font-size: 16px !important; } /* -------------------------------------------------------- 2. Tap targets reach 44px. 44px is the figure Apple's HIG and Google's Material both publish, and it is a floor rather than a target. Applied as min-height so anything already larger is left alone, and paired with min-width only on controls that are square-ish, so full-width buttons are not stretched. -------------------------------------------------------- */ button, [role="button"], summary, select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), .btn, .hrx-btn { min-height: 44px; } /* Checkboxes and radios are the one case where growing the control itself looks wrong — grow the hit area instead. */ input[type="checkbox"], input[type="radio"] { min-width: 20px; min-height: 20px; } /* Icon-only buttons — delete row, close, dismiss. These are the worst offenders in practice: small, and sat right next to the field they destroy. */ .rowkill, .hrx-panel__close { min-width: 44px; min-height: 44px; } /* -------------------------------------------------------- 3. Remove the 300ms tap delay. Browsers wait to see whether a tap is a double-tap-to-zoom before firing click. Declaring manipulation opts out and makes every button feel immediate. -------------------------------------------------------- */ a, button, [role="button"], input, select, textarea, label, summary { touch-action: manipulation; } /* Grey flash on tap reads as a rendering bug on a themed UI. */ a, button, [role="button"], summary { -webkit-tap-highlight-color: rgba(79, 70, 229, .14); } /* -------------------------------------------------------- 4. Anything pinned to the bottom clears the home indicator. Add .hrx-safe-bottom to a fixed/sticky bottom bar. Without this it sits underneath the indicator on every Face ID iPhone and the last row cannot be tapped. -------------------------------------------------------- */ .hrx-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .hrx-safe-top { padding-top: env(safe-area-inset-top, 0px); } /* -------------------------------------------------------- 4b. Controls the phone block never reached. Measured at 375px on 2026-08-18 — the first time anyone had. The 44px rule above targets a handful of shell classes; each tool names its own buttons differently and none of them were covered. These are the class and id names read off the rendered pages, not a guess at a convention. -------------------------------------------------------- */ .nav-item, .hrx-btn, .add-btn, .lcard-btn, #closeDrawer, [id$="Btn"] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Dense grouped controls: reliably tappable without stacking a dozen 44px rows into a panel that then will not fit. */ .view-btn, .reset-btn, .legend-swatch, .sb-mini-btn, .rowkill, .icon-btn, .rte-btn, .addrow, .lcard-link, .info-btn, .info-btn-dark, #view-topdown-btn, #view-leftright-btn, #view-compact-btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* A 1-to-5 rating scale in the 1:1 tool. The radio is 20px and its wrapping label was 32x32 — the label IS the target, so it is the label that has to grow, not the radio inside it. */ .scale-opt { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Clickable divs with no class of their own. min-height only, so an inline status chip stays inline. */ div[onclick] { min-height: 40px; } /* -------------------------------------------------------- 5. Long strings stop forcing sideways scroll. Emails and file paths are the usual culprits — one long unbroken token widens the whole document. -------------------------------------------------------- */ body { overflow-wrap: break-word; } } /* ============================================================ TABLETS — 768px to 1024px ============================================================ The block above stops at 767px and the shell's own rules stop at 720/760px, so an iPad in portrait fell through every one of them and got a layout drawn for a 1280px desktop. Measured on the real pages at 768px before writing any of this: · the shell header overflowed the screen by 71px and its nav was clipped and scrolling sideways · six nav links and buttons were 33-34px tall · the org chart's sidebar took 260px — 34% of the screen — leaving the chart itself squeezed into the remainder iPad portrait widths in use: 768 (9.7"), 810 (10.2"), 820 (Air), 834 (11" Pro), 1024 (12.9"). The upper bound is 1024 so a 12.9" in portrait is included; in landscape every iPad is 1024+ and gets the desktop layout, which is the right call at that width. ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* -------------------------------------------------------- 1. Touch targets. A tablet is a touch device with a desktop-width screen, so the 44px floor applies here exactly as it does on a phone — but none of the phone rules were reaching it. -------------------------------------------------------- */ .topnav a, .topnav button, .topnav__inbox, .btn, .btn-header, .modal-btn, .tb-btn, .hbg-btn { min-height: 44px; display: inline-flex; align-items: center; } /* The tools each name their toolbar buttons differently, and measuring found 24 more still at 23-32px after the list above. Targeting the toolbars by container catches them without a blanket `button` rule, which would also hit the small controls drawn inside chart nodes and table cells where 44px would wreck the layout. */ #top-bar button, #top-bar a, #top-bar .tb-btn, #top-bar .tb-icon-btn, .app-header button, .toolbar button, .hrx-back, #undo-btn, #redo-btn, #chart-mode-btn, #table-mode-btn, .chart-mode-btn, .table-mode-btn, .tb-icon-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Dense grouped controls — the sidebar's colour-by, view-style and mini buttons — sit at 40px rather than 44. At 23px they were genuinely hard to hit, but stacking a dozen of them at 44px pushes the filters off the bottom of an iPad and the panel stops being usable at all. 40px is the floor the org chart's own phone rules already use for secondary controls, so this follows the file rather than inventing a third number. */ /* These are ids in the org chart, not classes — checked in the markup rather than guessed, after a first pass wrote them as classes and silently did nothing. */ /* ── The other four tools, measured at 768px on 2026-08-18 ── Project Manager 7 · 1:1 29 · Document Builder 40 controls under 40px. Each tool names its buttons differently, so these are the actual class and id names read off the rendered pages rather than a guess at a convention. Document Builder's toolbar buttons are all `#somethingBtn`, so one attribute selector covers every one of them — and any added later. Scoped inside this media query, so it cannot reach desktop. */ .nav-item, .hrx-btn, .add-btn, .lcard-btn, .sidebar-close, #closeDrawer, [id$="Btn"] { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Dense inline controls stay at 40px. `.rowkill` is a per-row delete and there are 21 of them on one screen; at 44px each they add 84px of height to a list that has to stay scannable. 40px is reliably tappable and is the floor already used elsewhere in this file. */ /* Strategic Alignment's landing cards and info buttons. `.lcard-link` is a text link inside a card rather than a button, so it gets the 40px floor without becoming a block — enough to hit, not enough to reflow the card. */ /* Clickable divs with no class of their own — status chips like "On Track" that change value when tapped. min-height only, with no display change, so an inline chip stays inline and a block container is unaffected. */ .lcard-link, .info-btn, .info-btn-dark, .alt, .rowkill, .icon-btn, .rte-btn, .addrow, .sb-mini-btn, .view-btn, .reset-btn, #color-dept-btn, #color-loc-btn, #color-group-btn, #view-topdown-btn, #view-leftright-btn, #view-compact-btn, .sidebar-view-pill { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; } /* Clickable divs with no class of their own — status chips like "On Track" that change value when tapped. min-height ONLY: no display change, so an inline chip stays inline and a block container is unaffected. Listed apart from the group above for exactly that reason. */ div[onclick] { min-height: 40px; } /* Inputs get the same floor, and 16px to stop Safari zooming the page on focus — the same threshold as on phones. */ input, select, textarea { min-height: 44px; font-size: 16px; } /* -------------------------------------------------------- 2. The shell nav stops overflowing. It was 71px too wide and clipped. ⚠ This used to add `flex-wrap: wrap` to `.topnav` and `.topnav__links`, with the note "allowing it to wrap costs a second row on the narrowest iPad and shows every link, which beats a row of links that cannot be reached". That second row was never paid for. `.topnav__inner` was a FIXED `height: 60px`, so a wrapped row did not make the bar taller — it landed on the page underneath it. Reported from an iPad in portrait, 2026-08-31: "Admin Inbox" sitting on top of the workspace heading, with the brand and the user's name each split across two lines beside it. (The `.topnav` half of the selector never did anything at all — `.topnav` is not a flex container. Only `.topnav__links` was wrapping.) Both halves are fixed in app.css now, which is the file that owns this component: the links become one horizontally scrollable row at 721–1024 — the same treatment its own ≤720 block already used and proved — and `.topnav__inner` is `min-height`, so nothing can escape the bar again. The padding below stays. It is what made the row narrow enough to fit in the first place, and it is still doing that job. -------------------------------------------------------- */ .topnav a { padding-left: 10px; padding-right: 10px; } /* -------------------------------------------------------- 3. Tool sidebars stop eating the screen. 260px out of 768 is a third of the page given to chrome. The tools each name their sidebar differently, so all four are listed rather than assuming one convention. -------------------------------------------------------- */ .sidebar, #sidebar, .side-panel, .app-sidebar { width: 200px; min-width: 200px; flex-shrink: 0; } /* -------------------------------------------------------- 4. Nothing may scroll the page sideways. Wide tables and chart canvases scroll inside their own box instead of widening the document — the rule the phone layer already applies, which tablets never received. -------------------------------------------------------- */ body { overflow-wrap: break-word; } table, .table-wrap, .hrx-table-wrap, #chart-container { max-width: 100%; overflow-x: auto; } /* -------------------------------------------------------- 5. Modals fit the screen. Several are sized for a desktop viewport and ran off the bottom of an iPad in portrait, taking their buttons with them. -------------------------------------------------------- */ .modal, .modal-content { max-width: calc(100vw - 48px); max-height: calc(100vh - 64px); overflow-y: auto; } }