From 22a7e33df74729c0a2dbd4b12d30c60378ec677f Mon Sep 17 00:00:00 2001
From: James Ritchie <james@trigger.dev>
Date: Thu, 2 Jul 2026 19:09:56 +0100
Subject: [PATCH] fix(webapp): render error page full screen and use Enter
 shortcut (#4121)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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`.
---
 .server-changes/error-display-fullscreen.md | 6 ++++++
 apps/webapp/app/components/ErrorDisplay.tsx | 6 +++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .server-changes/error-display-fullscreen.md

diff --git a/.server-changes/error-display-fullscreen.md b/.server-changes/error-display-fullscreen.md
new file mode 100644
index 000000000..908238096
--- /dev/null
+++ b/.server-changes/error-display-fullscreen.md
@@ -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.
diff --git a/apps/webapp/app/components/ErrorDisplay.tsx b/apps/webapp/app/components/ErrorDisplay.tsx
index e1e0d3311..374f427c5 100644
--- a/apps/webapp/app/components/ErrorDisplay.tsx
+++ b/apps/webapp/app/components/ErrorDisplay.tsx
@@ -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}
         >