/* 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; }