An unhandled error has occurred. Reload 🗙 — a pale yellow bar along the bottom of every page, on the home page, before anyone has clicked anything, and there is no error. The banner is always in the markup; a stylesheet you deleted was the only thing hiding it.

The Blazor template renders <div id="blazor-error-ui"> in the layout at all times and hides it with #blazor-error-ui { display: none } in the layout's scoped stylesheet, MainLayout.razor.css. Blazor's JavaScript switches it to display: block only when an unhandled exception is reported. Delete or replace the template CSS and the div is simply visible. Put the display: none rule back in whichever stylesheet you kept.

The error

Not an exception — a div. This is the template markup, unchanged in MainLayout.razor:

<div id="blazor-error-ui" data-nosnippet>
    An unhandled error has occurred.
    <a href="." class="reload">Reload</a>
    <span class="dismiss">🗙</span>
</div>

Why it happens

The rule that hid it lived in the layout's scoped CSS, which the template compiles into ClinicLive.styles.css:

/* Components/Layout/MainLayout.razor.css (the template's) */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

The banner is a contract between three files: the layout that renders the div, the stylesheet that hides it, and blazor.web.js, which sets the element's inline display to block when the circuit reports an unhandled error. Remove the middle one and the other two still work perfectly — they just show the banner from the first paint. Nothing in the layout markup advertises that it depends on a rule in a different file.

The redesign deleted MainLayout.razor.css and NavMenu.razor.css along with Bootstrap, because everything they styled was being rebuilt on tokens. Everything except this.

The fix

/* wwwroot/app.css — the replacement, with its story attached */
/* The template's stylesheet quietly carried `#blazor-error-ui { display:none }`.
   Delete the template CSS and the "hidden" error banner greets every visitor —
   found by screenshot, of course. Blazor's JS un-hides it on a real error. */
#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
    background: var(--warn-soft); color: var(--ink);
    border-top: 2px solid var(--warn);
    padding: var(--s-3) var(--s-4);
    box-shadow: var(--shadow-lg);
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; margin-left: var(--s-3); }

The alternative is not to delete the scoped file at all: keep MainLayout.razor.css and remove only the rules you are replacing. Do not delete the div to make the banner go away — it is the only visible signal a user gets when a Blazor Server circuit dies.

Where it bit us

Season two, Part 2 (tag polish-02 in the repo), the part that built the token design system and removed Bootstrap. The screenshot pass that ran the moment the foundation compiled showed the yellow bar on every page — the second of three catches that part, and the only one no code review could have found, because the rule was doing its job by being absent from view. The lesson the season kept: the invisible parts of a template are still load-bearing, and when you delete a template's CSS you inherit every quiet job it was doing.

What the AI got wrong: it deleted a stylesheet it had grepped for classes the app used — and #blazor-error-ui is an id, not a class, referenced by no component. An inventory of what the markup uses misses what the JavaScript touches.

Frequently asked

Why does An unhandled error has occurred show on every page of my Blazor app?
The template always renders the blazor-error-ui div and hides it with a display none rule in MainLayout.razor.css. If that scoped stylesheet was deleted or replaced, nothing hides the div any more, so the banner is visible from the first page load even though no error has happened.
Where is the CSS that hides blazor-error-ui in the Blazor template?
In the Blazor Web App template it is in Components/Layout/MainLayout.razor.css, a scoped stylesheet that is compiled into the app's styles.css bundle. Older templates kept the same rule in wwwroot/app.css or site.css.
Can I just delete the blazor-error-ui div?
You can, but you lose the only visible signal a user gets when a Blazor Server circuit fails with an unhandled exception. Keep the div and add a display none rule for #blazor-error-ui to a stylesheet that is still loaded; Blazor's script shows it when a real error occurs.

More decoded errors in the Fixes category; the redesign this came from starts at From Prompt to Polish, Part 1.