fix(webapp): render error page full screen and use Enter shortcut (#4121)

Makes the app error page always render full screen — it previously
inherited the width/offset of whatever container the error boundary was
mounted in (e.g. the centered `max-w-xs` column in the root boundary),
so `min-h-screen` alone couldn't fill the viewport. The root container
now uses `fixed inset-0 z-50` to break out and cover the full screen
regardless of nesting.

Also changes the "Go to homepage" shortcut from `Cmd/Ctrl+G` (which
collides with the browser's native "Find Again") to `Enter`.
This commit is contained in:
James Ritchie
2026-07-02 19:09:56 +01:00
committed by GitHub
parent 8947c07a0c
commit 22a7e33df7
2 changed files with 9 additions and 3 deletions
@@ -0,0 +1,6 @@
---
area: webapp
type: fix
---
Error page now always renders full screen, and its "Go to homepage" shortcut changed from Cmd/Ctrl+G to Enter.
+3 -3
View File
@@ -60,13 +60,13 @@ type DisplayOptionsProps = {
export function ErrorDisplay({ title, message, button }: DisplayOptionsProps) {
return (
<div className="relative flex min-h-screen flex-col items-center justify-center bg-[#16181C]">
<div className="z-10 mt-[30vh] flex flex-col items-center gap-8">
<div className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-[#16181C]">
<div className="z-10 mt-[30vh] flex shrink-0 flex-col items-center gap-8">
<Header1>{title}</Header1>
{message && <Paragraph>{message}</Paragraph>}
<LinkButton
to={button ? button.to : "/"}
shortcut={{ modifiers: ["mod"], key: "g" }}
shortcut={{ key: "enter" }}
variant="primary/medium"
LeadingIcon={HomeIcon}
>