From 4591929760b5b04641e80ee0190acf98c1b80018 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Wed, 31 Jul 2024 19:38:27 +0800
Subject: [PATCH] fix: error page layout (#16310)

Signed-off-by: Innei <i@innei.in>
---
 lib/views/error.tsx  | 6 +++---
 lib/views/index.tsx  | 7 ++++---
 lib/views/layout.tsx | 2 +-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/lib/views/error.tsx b/lib/views/error.tsx
index a92bee172620cd..5277358be57611 100644
--- a/lib/views/error.tsx
+++ b/lib/views/error.tsx
@@ -11,13 +11,13 @@ const Index: FC<{
 }> = ({ requestPath, message, errorRoute, nodeVersion }) => (
     <Layout>
         <div
-            className="pointer-events-none absolute w-full h-screen"
+            className="pointer-events-none absolute w-full min-h-screen"
             style={{
                 backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMicgd2lkdGg9JzMyJyBoZWlnaHQ9JzMyJyBmaWxsPSdub25lJyBzdHJva2U9J3JnYigxNSAyMyA0MiAvIDAuMDQpJz48cGF0aCBkPSdNMCAuNUgzMS41VjMyJy8+PC9zdmc+')`,
                 maskImage: 'linear-gradient(transparent, black, transparent)',
             }}
         ></div>
-        <div className="w-full h-screen flex items-center justify-center flex-col space-y-4">
+        <div className="w-full grow shrink-0 py-8 flex items-center justify-center flex-col space-y-4">
             <img className="grayscale" src="/logo.png" alt="RSSHub" width="100" loading="lazy" />
             <h1 className="text-4xl font-bold">Looks like something went wrong</h1>
             <div className="text-left w-[800px] space-y-6 !mt-10">
@@ -104,7 +104,7 @@ const Index: FC<{
                 </div>
             </div>
         </div>
-        <div className="absolute bottom-10 text-center w-full text-sm font-medium space-y-2">
+        <div className="mt-4 pb-8 text-center w-full text-sm font-medium space-y-2">
             <p className="space-x-4">
                 <a target="_blank" href="https://github.com/DIYgod/RSSHub">
                     <img className="inline" src="https://icons.ly/github/_/fff" alt="github" width="20" height="20" />
diff --git a/lib/views/index.tsx b/lib/views/index.tsx
index c753d7cab7a4ae..1cfac8a70f0486 100644
--- a/lib/views/index.tsx
+++ b/lib/views/index.tsx
@@ -129,13 +129,13 @@ const Index: FC<{ debugQuery: string | undefined }> = ({ debugQuery }) => {
     return (
         <Layout>
             <div
-                className="pointer-events-none absolute w-full h-screen"
+                className="pointer-events-none absolute w-full min-h-screen"
                 style={{
                     backgroundImage: `url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMiAzMicgd2lkdGg9JzMyJyBoZWlnaHQ9JzMyJyBmaWxsPSdub25lJyBzdHJva2U9J3JnYigxNSAyMyA0MiAvIDAuMDQpJz48cGF0aCBkPSdNMCAuNUgzMS41VjMyJy8+PC9zdmc+')`,
                     maskImage: 'linear-gradient(transparent, black, transparent)',
                 }}
             ></div>
-            <div className="w-full h-screen flex items-center justify-center flex-col space-y-4">
+            <div className="w-full grow shrink-0 py-8 flex items-center justify-center flex-col space-y-4">
                 <img src="/logo.png" alt="RSSHub" width="100" loading="lazy" />
                 <h1 className="text-4xl font-bold">
                     Welcome to <span className="text-[#F5712C]">RSSHub</span>!
@@ -165,7 +165,8 @@ const Index: FC<{ debugQuery: string | undefined }> = ({ debugQuery }) => {
                     </details>
                 ) : null}
             </div>
-            <div className="absolute bottom-10 text-center w-full text-sm font-medium space-y-2">
+
+            <div className="text-center pt-4 pb-8 w-full text-sm font-medium space-y-2">
                 <p className="space-x-4">
                     <a target="_blank" href="https://github.com/DIYgod/RSSHub">
                         <img className="inline" src="https://icons.ly/github/_/fff" alt="github" width="20" height="20" />
diff --git a/lib/views/layout.tsx b/lib/views/layout.tsx
index f988bda2d40b10..11818378e7089e 100644
--- a/lib/views/layout.tsx
+++ b/lib/views/layout.tsx
@@ -45,6 +45,6 @@ export const Layout: FC = (props) => (
                 `}
             </style>
         </head>
-        <body className="antialiased text-zinc-700">{props.children}</body>
+        <body className="antialiased min-h-screen text-zinc-700 flex flex-col">{props.children}</body>
     </html>
 );