/* ============================================================================ responsive.css — phone/tablet layer for the portal shell and pages. Loaded LAST in so it wins over MudBlazor, Syncfusion, app.css and the scoped component stylesheets. Everything here lives inside a max-width media query, so desktop rendering is byte-for-byte unchanged. Breakpoints match MudBlazor's own: phone < 600px (Breakpoint.Xs) tablet < 960px (Breakpoint.Sm and below) ============================================================================ */ /* ============================================================================ 1. Navigation drawer ---------------------------------------------------------------------------- The open/closed behaviour itself needs no help: MudBlazor already hides an untouched responsive drawer below its breakpoint (`.mud-drawer-responsive.mud-drawer-md.mud-drawer--initial { display: none }`), and `mud-drawer--initial` is only dropped once the user taps the toggle. That also survives enhanced navigation, because every server render re-emits it. What is missing is the overlay treatment: below Md the drawer floats on top of the page instead of pushing it, with nothing separating the two. ============================================================================ */ @media (max-width: 959.98px) { .mud-drawer.mud-drawer-responsive.mud-drawer--open:not(.mud-drawer--initial) { box-shadow: 0 8px 32px rgba(2, 6, 23, 0.4); } } /* ============================================================================ 2. Top app bar ---------------------------------------------------------------------------- The toolbar is a single nowrap flex row: logo + "Portal" + organization picker + billing buttons + 4 icon buttons. Below ~900px that is wider than the viewport and the trailing controls (avatar / user menu) get pushed out of reach. ============================================================================ */ @media (max-width: 959.98px) { /* "Portal" is redundant next to the logo and is the cheapest thing to drop. */ .appbar-portal-label { display: none; } .appbar-theme-logo { height: 22px; margin-left: 2px !important; margin-right: 4px !important; } /* The shrink above buys width for the organization picker — and the Drawmetrics bar has no picker, so it pays the cost for nothing: its 4:1 wordmark came out 73x18 in a 56px bar with ~130px of the toolbar sitting empty. 32px is proportionate to the bar and still leaves that slack (32 x 4.05 = ~130px wide). Both classes are named so this outranks the 18px phone rule further down the file whatever the source order. */ .appbar-theme-logo.appbar-theme-logo-drawmetrics { height: 32px; } /* MudSelectExtended renders two nested boxes: the flex item (`div.mud-select-extended`) and, inside it, the input control that carries our class. Sizing only the inner one is why the bar looked crowded: the flex layout shrank the outer box to ~68px on a phone while the inner control held a 140px floor, so it painted ~76px straight over the sun/bell icons. Size the flex item, and let the control fit whatever it gets. */ .main-layout-appbar .mud-toolbar > .mud-select-extended { flex: 1 1 auto; min-width: 0; max-width: 320px; } .appbar-org-select { flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; margin-left: 4px !important; margin-right: 6px !important; } .appbar-org-select .mud-input-outlined .mud-input-root { border-radius: 12px; height: 32px; min-height: 32px; padding-left: 8px; padding-right: 4px; } .appbar-org-select .mud-input-slot, .appbar-org-select .mud-select-input input { font-size: 0.8rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appbar-org-select .mud-input-adornment { margin-left: 2px; margin-right: 2px; } .appbar-org-select .mud-input-adornment .mud-icon-root { font-size: 1rem; } .main-layout-appbar .mud-toolbar-gutters { padding-right: 8px; padding-left: 4px; } /* One consistent 36px target for every trailing control (sun/moon, bell, settings, avatar), with even 2px margins so neighbours read as separate buttons. 28px boxes 1px apart were the other half of the crowding. The glyph rule that used to sit here was written as `... ::deep .mud-icon-root`, which never matched anything: ::deep only means something inside a scoped component stylesheet, not a plain one like this. */ .main-layout-appbar .mud-icon-button { width: 36px; min-width: 36px; height: 36px; padding: 6px !important; margin-left: 2px !important; margin-right: 2px !important; } .main-layout-appbar .mud-icon-button .mud-icon-root { font-size: 1.25rem !important; } /* The avatar keeps its own inner geometry (surface / initials / caret are positioned against each other below); only its hit box joins the 36px rhythm. */ .main-layout-appbar .appbar-user-menu-root, .main-layout-appbar .appbar-user-menu-root .mud-button-root, .main-layout-appbar .appbar-user-menu-root .mud-icon-button, .main-layout-appbar .appbar-user-menu-root .mud-menu-activator, .main-layout-appbar .appbar-avatar-button { width: 36px; min-width: 36px; height: 36px; margin-left: 2px; margin-right: 2px; } .main-layout-appbar .appbar-avatar-surface { width: 28px; height: 28px; } .main-layout-appbar .appbar-user-avatar { width: 26px; height: 26px; font-size: 0.85rem !important; font-weight: 700 !important; } /* Compact avatar dropdown arrow positioned nicely inside bottom-right corner */ .main-layout-appbar .appbar-avatar-caret { width: 14px; height: 14px; right: -6px; bottom: -10px; border-width: 1.5px; } /* Same dead-`::deep` fix as above: without it the caret keeps MudIcon's Size.Small (20px) glyph inside a 14px badge. */ .main-layout-appbar .appbar-avatar-caret .mud-icon-root { width: 11px; height: 11px; font-size: 11px; } } @media (max-width: 599.98px) { .appbar-theme-logo { height: 18px; margin-left: 0px !important; margin-right: 2px !important; } /* Something has to yield on a phone: the hamburger, logo, organization picker and four trailing controls do not fit, and squeezing the picker is what made the bar collide. Dropping the logo would buy the picker ~75px and let the pencil stay, but the logo is the bar's only branding, so the pencil yields instead — editing the organization is still reachable from the settings gear. */ .appbar-org-select .mud-input-adornment { display: none; } } /* On the narrowest phones (320px, or a wider screen at a large system font) the hamburger, logo and four trailing controls leave the organization picker with 14px — too small to read a name in. Here the logo does have to give way; above this width it always stays. The Drawmetrics bar is exempt: it has no picker to starve, so hiding its wordmark would cost it its only branding and buy nothing. */ @media (max-width: 359.98px) { .appbar-theme-logo:not(.appbar-theme-logo-drawmetrics) { display: none; } } /* ============================================================================ 3. Page canvas ---------------------------------------------------------------------------- Pages are laid out with MudBlazor spacing utilities tuned for desktop (pa-6 / pa-8 = 24px / 32px on every side). On a 375px screen that is up to a third of the usable width. The ancestor selector raises specificity above the utility's own `!important`, and confines the reduction to routed content. Two ancestors are needed because the portal has three shells: MainLayout wraps its body in `.main-layout-body`, while MainPrintableLayout and DrawmetricsLayout both wrap theirs in `.light-grey-content`. ============================================================================ */ @media (max-width: 599.98px) { .main-layout-body .pa-6, .main-layout-body .pa-8, .main-layout-body .pa-10, .light-grey-content .pa-6, .light-grey-content .pa-8, .light-grey-content .pa-10 { padding: 12px !important; } .main-layout-body .px-6, .main-layout-body .px-8, .main-layout-body .px-10, .light-grey-content .px-6, .light-grey-content .px-8, .light-grey-content .px-10 { padding-right: 12px !important; padding-left: 12px !important; } .main-layout-body .ma-6, .main-layout-body .ma-8, .light-grey-content .ma-6, .light-grey-content .ma-8 { margin: 8px !important; } /* MudStack Row="true" renders `d-flex flex-row` with no wrapping, so a row that does not fit either squeezes its children to nothing or pushes past the screen edge. Wrapping is inert while the row fits and only engages once it would otherwise overflow, so it is safe to apply to rows in general. */ .main-layout-body .d-flex.flex-row:not(.flex-nowrap), .light-grey-content .d-flex.flex-row:not(.flex-nowrap) { flex-wrap: wrap; } } /* ============================================================================ 4. Fixed-width surfaces ---------------------------------------------------------------------------- ~40 pages set a hard pixel width on a card or paper (Style="width: 600px", "width: 450px", "width: 800px", ...). Below that width the element overflows the viewport and drags the whole page into horizontal scroll. `max-width` clamps them without touching the desktop `width`. Wrapped in :where() so this counts as a floor, not a verdict. Written bare, the `.mud-paper:not(.mud-drawer):not(.mud-appbar)` branch scores (0,3,0) — enough to tie `.login-bg-default[b-xxx] .login-card` and win on source order, which silently undid the login and register cards' own max-width and let them span 736px of a 768px tablet. At zero specificity the guard still stops the 600px-wide pages from overflowing, because those set `width`, not `max-width`, and nothing else competes for the property. ============================================================================ */ @media (max-width: 959.98px) { :where(.mud-card, .mud-table, .mud-table-container, .mud-paper:not(.mud-drawer):not(.mud-appbar)) { max-width: 100%; } .main-layout-body img, .light-grey-content img { max-width: 100%; height: auto; } /* Popovers (organization search, menus, selects) are positioned against the anchor and can otherwise render partly off-screen. */ .mud-popover { max-width: calc(100vw - 16px) !important; overflow-x: hidden !important; } .mud-select, .mud-select .mud-input-control, .mud-select .mud-input-control-input-container, .mud-select .mud-input-outlined { min-width: 0 !important; max-width: 100% !important; width: 100% !important; overflow: visible !important; box-sizing: border-box !important; } .mud-select .mud-input-slot, .mud-select input { min-width: 0 !important; max-width: calc(100% - 24px) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .mud-popover .mud-list-item-text, .mud-popover .mud-typography, .mud-popover .mud-select-item { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; } .ai-model-select-popover, .mud-popover.ai-model-select-popover, .tokens-select-popover, .mud-popover.tokens-select-popover, .reports-select-popover, .mud-popover.reports-select-popover, .portal-select-popover, .mud-popover.portal-select-popover { /* max-width is a ceiling against overflow — nothing more. Pinning left AND right as well forced every popover to span the whole gap between the two edges, so a dropdown holding "+1" or "Other" opened at full screen width. That was wrong on a phone and worse on a tablet, where this breakpoint still applies but there is far more room to look wrong in. Without the pins the popover sizes to its content and MudBlazor anchors it to the input, flipping it when it would run past an edge. */ max-width: calc(100vw - 32px) !important; width: auto !important; overflow-x: hidden !important; /* Keep long lists inside the screen instead of pushing the page. */ max-height: min(60vh, 380px) !important; overflow-y: auto !important; } .ai-model-select-popover .mud-list-item, .ai-model-select-popover .mud-list-item-text, .ai-model-select-popover .mud-typography, .ai-model-select-popover .mud-select-item { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; max-width: 100% !important; } /* Syncfusion grids render a table that is wider than a phone. app.css sets `overflow: hidden` on .e-grid for the rounded corners, which silently clips the extra columns; pan the grid instead so every column stays reachable. */ .e-grid { overflow-x: auto; overflow-y: hidden; } } /* ============================================================================ 5. Dialogs ---------------------------------------------------------------------------- MudDialog sizes come from `.mud-dialog-width-*` (Sm = 600px). Raising specificity with the container class overrides them without `!important`. ============================================================================ */ @media (max-width: 599.98px) { .mud-dialog-container .mud-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); margin: 8px; } .mud-dialog-container .mud-dialog .mud-dialog-title { padding: 12px 16px; } .mud-dialog-container .mud-dialog .mud-dialog-content { padding: 0 16px; } .mud-dialog-container .mud-dialog .mud-dialog-actions { flex-wrap: wrap; } /* Phone: the consent dialogs take the screen. Reading a legal document is the only thing happening here, so the usual dialog inset would be wasted space — the previous 60vw gave a 234px column, narrower than the backdrop either side of it. */ .mud-dialog-container .mud-dialog.attitux-consent-dialog { width: calc(100vw - 16px); max-width: calc(100vw - 16px); margin: 8px auto; } /* Give the document as much height as the dialog chrome allows. */ .attitux-consent-dialog .attitux-consent-scroll { height: min(74vh, 720px); } .attitux-consent-dialog .attitux-consent-header { padding-bottom: 6px; } .attitux-consent-dialog .attitux-consent-header h2 { font-size: 20px; } /* Stack the two actions full width — they are a decision point, not a toolbar. */ .attitux-consent-dialog .attitux-consent-footer { gap: 8px; } .attitux-consent-dialog .attitux-consent-footer .mud-button-root { flex: 1 1 0; } } /* ============================================================================ 6. Report tables ---------------------------------------------------------------------------- The 23 reports under Pages/Organization/ResultWorkflow are built almost entirely from four shared components — OneColumnTable, TwoColumnTable, ThreeColumnTable and RiskScoreTable — so everything they need on a phone is fixed once, here. MudTable stacks each row into a card below its own Xs breakpoint by hiding (`.mud-xs-table .mud-table-root .mud-table-head { display: none }`) and printing the cell's `data-label` in front of every value instead. For a report that trade is wrong in two different ways depending on the shape of the table, so the two shapes are handled separately: * one column -> the components pass Breakpoint.None, so a real table (and its coloured header) survives; a single column cannot overflow anyway. * two/three -> stay stacked, but the header comes back as a band above the records so the section title is not lost, and only the labels that actually carry meaning are printed per cell. The queries below use 600px rather than the 599.98px used elsewhere in this file: MudBlazor's own small-device rules are `@media (max-width: 600px)`, and these have to cover exactly the same range or a 600px-wide viewport gets half of each layout. ============================================================================ */ @media (max-width: 600px) { /* Reports are prose. Reclaim the horizontal padding MudTable spends on data-grid gutters, and let long words break instead of pushing the table wider. */ .report-one-column-table .mud-table-cell, .report-two-column-table .mud-table-cell, .report-three-column-table .mud-table-cell, .report-risk-score-table .mud-table-cell { padding-right: 10px !important; padding-left: 10px !important; overflow-wrap: break-word; } /* Justified prose in a ~330px column opens rivers of whitespace. */ .report-two-column-cell-rich { text-align: start; } /* --- Two and three column tables: stacked records ------------------------- */ /* Turning the whole table into a block flow (not just the cells) is what keeps the records full width once the columns stop being columns. */ .report-two-column-table.mud-xs-table .mud-table-root, .report-two-column-table.mud-xs-table .mud-table-root .mud-table-body, .report-two-column-table.mud-xs-table .mud-table-root .mud-table-body .mud-table-row, .report-three-column-table.mud-xs-table .mud-table-root, .report-three-column-table.mud-xs-table .mud-table-root .mud-table-body, .report-three-column-table.mud-xs-table .mud-table-root .mud-table-body .mud-table-row { display: block; width: 100%; } .report-two-column-table.mud-xs-table .mud-table-cell, .report-three-column-table.mud-xs-table .mud-table-cell { display: block; width: 100%; } /* The 300px first column exists to line up labels against prose. Once they are stacked it only forces the row wider than the screen. */ .report-two-column-header-fixed, .report-two-column-cell-fixed { width: auto; min-width: 0; } /* --- Two column tables --------------------------------------------------- */ /* Bring back as a full-width band. Column 1's header is the section title ("Phase 1", "Potential Attrition Drivers") and is the whole point of the block; column 2's ("Description", "Symptoms", ...) becomes its sub-heading rather than a label repeated on top of every record. */ .report-two-column-table.mud-xs-table .mud-table-root .mud-table-head, .report-two-column-table.mud-xs-table .mud-table-root .mud-table-head .mud-table-row { display: block; width: 100%; } .report-two-column-table.mud-xs-table .mud-table-head .report-two-column-header { display: block; width: 100%; text-align: start; } .report-two-column-table.mud-xs-table .mud-table-head .report-two-column-header:last-child { padding-top: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; } /* Column 1 already reads as the record's heading, so its data-label would only repeat the band above it. */ .report-two-column-table.mud-xs-table .mud-table-cell::before { content: none; } .report-two-column-table.mud-xs-table .report-two-column-cell-fixed { font-weight: 600; padding-bottom: 0; } /* --- Three column tables ------------------------------------------------- */ /* Here every column is content, not a label, so each value keeps its column name above it. MudBlazor's own ::before puts the label beside the value with a 16px gap, which leaves nothing for the prose. */ .report-three-column-table.mud-xs-table .mud-table-cell::before { content: attr(data-label); display: block; padding: 0 0 2px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.65; } /* With the header row gone the table loses the colour that identifies it, and the records lose their left edge. One accent stripe restores both. */ .report-three-column-table.mud-xs-table .mud-table-body .mud-table-cell { border-left: 3px solid var(--report-three-column-light-header-background); } .report-three-column-table.mud-xs-table .mud-table-body .mud-table-cell:not(:last-child) { padding-bottom: 0; } } /* Tablets keep a real two-column table, but 300px of it spent on the label column leaves the prose in a ditch. A share of the width behaves at every size. */ @media (min-width: 600.02px) and (max-width: 959.98px) { .report-two-column-header-fixed, .report-two-column-cell-fixed { width: 34%; min-width: 0; } } /* ============================================================================ 7. Report page chrome ---------------------------------------------------------------------------- Everything around the tables: the action bar every report opens with, the radar charts, and the succession roadmaps. ============================================================================ */ @media (max-width: 600px) { /* "Download as PDF" + "See drawings" (+ "Assessments") is wider than a phone. The stack already wraps via section 3; sharing the row evenly stops the last button from being stranded on a line of its own at half width. */ /* The reports set AlignItems.End, which leaves a button whose label fits on one line hanging off the bottom of a two-line neighbour ("Download as PDF" wraps at this width). Stretching makes every button in a row the same height. MudStack renders the alignment as `.align-end { align-items: flex-end !important }`, so this needs both `!important` and a second class to outrank it — `d-flex` is on every MudStack. */ .d-flex.report-action-bar { align-items: stretch !important; } /* MudButton's 14px uppercase label plus 16px side padding makes "Download as PDF" ~178px, wider than half a 390px screen, so it wrapped to two lines and left its row-mate looking half-height. Tighter type and padding keep every label on one line. `flex: 1 0 auto` sizes each button from that label and lets it grow into spare space but never shrink below it, so buttons share a row while they fit and take a full-width row of their own once they do not. With shrink left at 1 a 360px screen squeezed two buttons onto one row and clipped a label. */ .report-action-bar > .mud-button-root { flex: 1 0 auto; padding-right: 10px; padding-left: 10px; font-size: 0.8rem; } /* Card action rows have the same problem in a smaller box: inside the drawings stepper the row is 192px, and "View My Reports" was being squeezed into 104px — three lines of text, 54px tall, next to a 31px "Ok". Buttons keep their natural width and drop to the next line rather than shrinking their label into a column. */ .mud-card-actions { flex-wrap: wrap; } .mud-card-actions > .mud-button-root { flex-shrink: 0; padding-right: 10px; padding-left: 10px; font-size: 0.8rem; } .report-action-bar .mud-button-label, .mud-card-actions .mud-button-label { white-space: nowrap; } /* 400px of radar on a 375px screen is mostly axis labels. */ .report-radar-chart { height: 300px; } .report-radar-chart text { font-size: 10px !important; } /* Report bodies still carry inline `text-align: justify` in places, which needs to lose to the same argument as .report-two-column-cell-rich above. */ #reportContent .mud-typography[style*="justify"] { text-align: start !important; } } /* ============================================================================ Baked-in-text artwork ---------------------------------------------------------------------------- drawing-instructions.png is a 1152x100 strip whose four step captions are part of the image. Sized at `width: 100%` it scales with the column, so on a phone's ~326px content box it lands at 0.28x and the captions render about 4px tall — solid smudges. Desktop is fine (the max-width: 900px cap keeps it at ~0.78x), so this only fires on phones: hold the image at a legible scale and let the strip be panned instead. This is a stopgap. The real fix is a phone-shaped asset (or real HTML/SVG captions), because panning to read instructions is still poor. ============================================================================ */ @media (max-width: 600px) { .demo-instructions-strip { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .demo-instructions-strip img { width: 860px; min-width: 860px; max-width: none; } } /* Snackbars keep the position they are configured with — they are transient overlays, and briefly covering what is underneath is how they are meant to behave. What does need fixing is their width: MudBlazor gives `.mud-snackbar` a 288px floor and a 500px ceiling, so against the container's 24px right offset a longer message grew past the left edge of a phone and rendered flush at x=0 with its left corner squared off. Let it fit the screen instead; the anchor point is untouched. */ @media (max-width: 600px) { #mud-snackbar-container .mud-snackbar { min-width: 0; max-width: calc(100vw - 32px); } } /* The succession roadmaps draw a timeline: a 75%-wide milestone card, then two tables side by side under it, joined by absolutely positioned 1px rules. Below Md the 75% leaves the milestone text in a column barely wider than a word, so let it fill the page; the split itself only has room to stack on a phone, and once it stacks the connectors point at nothing. */ @media (max-width: 959.98px) { .report-roadmap-milestone, .report-roadmap-split-inner { width: 100% !important; } } @media (max-width: 600px) { .report-roadmap-split-inner { flex-direction: column; } .report-roadmap-pane { min-width: 0 !important; flex-basis: 100% !important; } .report-roadmap-connector, .report-roadmap-divider { display: none; } .report-roadmap-split { margin-top: 12px !important; } } /* ============================================================================ Tokens page — "Join us!" / plan columns once they stack ---------------------------------------------------------------------------- Tokens.razor.css already asks for 2.5rem of clearance on each side of the divider below Md, but the rule never lands: the classes sit on MudItem components, and Blazor's CSS isolation only stamps its scope attribute onto plain HTML elements — so both the bare selector and the ::deep variant match nothing. The divider ended up 2px from the paragraph above it and 4px from the price below, reading as an underline rather than a separator. Same rules, from a stylesheet that is not scoped. ============================================================================ */ @media (max-width: 959.98px) { .tokens-join-column { padding-right: 0 !important; padding-bottom: 2.5rem !important; margin-bottom: 0 !important; } .tokens-plan-column { padding-top: 2.5rem !important; } .tokens-section-title { margin-bottom: 1rem; } } /* ============================================================================ Payment pages — give the Stripe form the width back ---------------------------------------------------------------------------- /payment and /payment-subscription mount Stripe's embedded checkout in an iframe whose width is whatever the padding chain leaves it. Measured on an iPhone 14 Pro Max (430px): `.pa-2.main-layout-body` 8 + MudContainer gutters 16 + MudPaper `pa-4` 16 = 40px per side, so a 430px screen handed the checkout 350px and the card-number field came out 285px. The MudGrid spacing (24px item padding) costs nothing here — the grid's own -24px margin cancels it. Stripe owns everything inside the iframe, so its fields can only be made bigger by giving the iframe more room. 8px at each of the two layers we control takes the inset from 40px to 24px: 382px of checkout on a 14 Pro Max, 345px on a 14 Pro. The card inside the iframe keeps Stripe's own padding, so this does not crowd the form — it only stops the page from spending a fifth of a phone screen on nested gutters. Phones only. From 600px up the checkout already has more width than it needs (672px in iPad portrait), and the gutters are what keep the page from looking edge-to-edge there. ============================================================================ */ @media (max-width: 599.98px) { .mud-container.payment-page-container { padding-right: 8px; padding-left: 8px; } /* `pa-4` is `padding: 16px !important`, so this needs !important too; the two-class selector is what wins the tie. Only the sides are reclaimed — the vertical padding keeps the iframe off the card's rounded corners. */ .mud-paper.payment-checkout-card { padding-right: 8px !important; padding-left: 8px !important; } } /* ============================================================================ 8. Auth pages ---------------------------------------------------------------------------- The brand logo is centered horizontally at top on mobile screens. ============================================================================ */ @media (max-width: 899.98px) { .auth-theme-logo { top: 80px; left: 50%; transform: translateX(-50%); width: 170px; } } @media (max-width: 599.98px) { .auth-theme-logo { top: 70px; left: 50%; transform: translateX(-50%); width: 160px; } .candidate-promotion-options .d-flex { flex-wrap: wrap !important; gap: 8px !important; } .payment-status-chip { max-width: 100%; margin-top: 4px; } } /* Available Reports filter row. The two selects default to `flex: 1 1 auto` and grew to 288px each at tablet width, leaving the Purchase Tokens button 74px and its label on two lines. Cap them here rather than via MudSelect `Style`, which lands on an inner element and never reaches the flex item. */ .reports-filter-select { flex: 0 1 250px; min-width: 0; } .reports-filter-row > .mud-button-root { flex: 0 0 auto; } @media (max-width: 600px) { /* One filter per line beats two 170px selects with truncated dates. */ .reports-filter-select { flex: 1 1 100%; } } /* International phone input: fixed-width dial code, phone field takes the rest. Targeted by position, not by class, because MudSelectExtended and MudTextField both put a passed-in Class on an inner element rather than on the flex item this needs to size. */ .phone-input-row > * { min-width: 0; } .phone-input-row > :first-child { flex: 0 0 120px; } /* :last-child, not :nth-child(2) — MudSelectExtended emits a zero-width sibling right after the select, so the phone field is actually the third child. basis 0, not auto, and nowrap on the row: the phone-row wrap rule further up this file turns on flex-wrap for every .d-flex.flex-row on a phone, and a wrapping flex line breaks BEFORE it shrinks. With basis auto the phone field asked for its natural 266px, did not fit beside the 120px dial code, and dropped to the next line — the exact symptom the fix was meant to remove. */ .phone-input-row { flex-wrap: nowrap; /* MudSelectExtended is 68px tall against MudTextField's 56px, so the two boxes sat 8px apart. Align on the bottom edge — that is where the input outlines are, and it is what the eye reads as "same row". !important because the shared flex-row rules it competes with carry it too, and a plain declaration lost. */ align-items: flex-end !important; } .phone-input-row > :last-child { flex: 1 1 0; } /* ============================================================================ Wizard partials: reclaim nested padding on phones ---------------------------------------------------------------------------- Every stepper partial opens its own MudContainer inside the page container, and the wizard body nests card > card. Measured on /organization-details at 390px, that chain ran 364 > 332 > 330 > 298 > 250 > 230 > 218 > 200 > 180 > 168, i.e. 111px of padding per side and a form field at 43% of the screen. Desktop has the room, phones do not, so only the redundant inner layers are trimmed here. ============================================================================ */ @media (max-width: 599.98px) { .mud-container .mud-container { padding-left: 0; padding-right: 0; } .mud-stepper-content { padding-left: 8px; padding-right: 8px; } .mud-card .mud-card > .mud-card-content { padding-left: 8px; padding-right: 8px; } } /* Candidate greeting row: avatar + "Hey, Andrew!" (Typo.h3) + account button on one nowrap flex line. On a 390px phone the h3 took the space and squeezed the button to 100px, so its label broke across two lines. Let the row wrap and keep the button at its natural width. */ .candidate-greeting-row { flex-wrap: wrap; gap: 8px; } .candidate-greeting-row > .mud-button-root { flex: 0 0 auto; } @media (max-width: 599.98px) { .candidate-greeting-row .mud-typography-h3 { font-size: 1.75rem; } } /* ============================================================================ Country dial-code dropdown ---------------------------------------------------------------------------- Width only. This block used to also carry `left: auto !important; right: auto !important`, written to undo an earlier version of the .portal-select-popover rule above that pinned every such popover to left:16px/right:16px. Those pins are gone, but the counter-declarations stayed and became the bug: MudBlazor positions a popover by writing a computed `left`, so forcing it to `auto` dropped the anchor and left the box at its static position — measured on /invite-candidate, the list opened at x=0 while its input sat at x=325, i.e. 325px to the left of the field, at both 1024px and 1440px. Let MudBlazor place it; only cap how wide it gets. Kept at this specificity and source position so the caps still outrank .portal-select-popover: the dial code is short on a desktop too. ============================================================================ */ .country-dropdown-popover, .mud-popover.country-dropdown-popover { /* NOT max-content: ItemTemplate renders flag + country NAME + dial code, so max-content sizes the popover to "United Arab Emirates" and friends — which is what made it overrun the page in the first place. Let it fit its box and cap it; the names ellipsis instead of pushing. */ width: auto !important; /* Scales with the screen instead of a fixed cap: 45vw is the ceiling, floored at 160px so a narrow phone still shows a usable list and capped at 320px so a desktop does not get a pointlessly wide panel for two-character dial codes. iPhone 14 Pro Max (430px) lands at ~193px, a 714px window at 320px, and anything wider stays at 320px. */ min-width: 132px !important; max-width: clamp(160px, 45vw, 320px) !important; } /* Long country names truncate rather than widen the popover. Needed because the flag/name/code spans sit in a plain d-flex div from ItemTemplate, which has no truncation of its own. */ .country-dropdown-popover .mud-list-item, .country-dropdown-popover .mud-list-item-text, .country-dropdown-popover .mud-list-item .d-flex, .country-dropdown-popover .mud-list-item span:not(.flag-font) { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Cap the height so the list scrolls inside itself instead of pushing the page. Applied to the popover and to the list it wraps, because MudSelectExtended puts its search box and its options in separate boxes and either one can be the scroller. */ .country-dropdown-popover, .mud-popover.country-dropdown-popover, .country-dropdown-popover .mud-list, .country-dropdown-popover .mud-popover-content { max-height: min(50vh, 320px) !important; overflow-y: auto !important; overflow-x: hidden !important; }