/* Match the Bootstrap reset loaded by oig-web. Shared components size their boxes assuming borders and padding are included in declared dimensions. */ *, *::before, *::after { box-sizing: border-box; } /* OIG.Blazor.Global's site.css has ".custom-code-page .custom-code-page-input-area *" set display:flex on every descendant, including the OTPInput component's hidden combined-code . An author-origin rule always beats the UA default ([hidden] { display: none }), so the hidden field renders as a visible empty box under the OTP digits. Force it back to hidden without touching the shared (read-only reference) library. */ .custom-code-page-input-area input[hidden] { display: none !important; } /* site.css's html/body flex chain (html { display:flex; flex-grow:1 }, body { display:flex; flex:1 }) assumes whatever sits directly inside is itself a flex item/container all the way down to .custom-code-page. Blazor Server (the old app) renders straight into , so the chain is unbroken; Blazor WASM needs a #app mount div, which is an extra, unstyled link in that chain -- left at the browser default (display:block), #app doesn't grow to fill , so .custom-code-page's two-column split (and the diagonal banner image inside it) is laid out against whatever tiny box #app shrinks to instead of the viewport. Same fix as the sibling WASM app oig-web (src/WebUI/wwwroot/index.html). */ body { width: 100vw; } #app { width: 100%; display: flex; flex: 1; } /* Same flex chain, one link further down. The status pages (/closed, /planned, /unavailable) wrap SpecialPageLayout in a plain
that exists only to carry a data-testid, and an unstyled
inside #app's flex row is a flex item that shrinks to fit its content instead of filling it. Its .special-page child then resolves width:100% against that shrunken box, and the library's .special-page-info { width: 25% } against THAT -- so the card came out ~130px wide and the title wrapped one word per line, with the width depending on how long the page's own text happened to be. The wrapper keeps a box (a test hook that isn't visible is a trap for the Playwright test that will eventually assert on it) and simply fills the row. */ .special-page-host { display: flex; flex: 1; } /* OIG.Blazor.Global sizes the card with a bare `width: 25%` and no media query, so it tracks the viewport all the way down: ~384px at 1536 (right), 192px at 768, and 90-104px on a phone, where the 32px padding leaves a text column of 26-40px -- two or three characters per line. Percent of the viewport was never the intent; the card wants a fixed comfortable width with a gutter once the screen is narrower than that. Belongs upstream in the library, overridden here because respondents reach these pages on phones today. */ .special-page-info { width: min(384px, calc(100% - 32px)); } /* The library's own stylesheet asks for `../images/background.svg`, but the package ships the file in `Images/` -- so the branded background 404s on the Linux container while resolving fine on a Windows dev box, which is why it was never noticed. Point at the path that actually exists. Belongs upstream too: the fix there is to match the casing in one place or the other. */ .special-page { background-image: url("/_content/OIG.Blazor.Global/Images/background.svg"); }