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:
@@ -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.
|
||||
@@ -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}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user