From cbd0ef3a62cf00ed0c1ffaa49778be9bb4463a76 Mon Sep 17 00:00:00 2001
From: Brian Hackett <bhackett1024@gmail.com>
Date: Fri, 14 Mar 2025 12:30:10 -0700
Subject: [PATCH] Fix dark mode rendering problems (#63)

---
 README.md                  | 2 +-
 app/routes/_index.tsx      | 2 +-
 app/routes/problem.$id.tsx | 2 +-
 app/routes/problems.tsx    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 7b440dde..35950397 100644
--- a/README.md
+++ b/README.md
@@ -10,5 +10,5 @@ When you ask Nut to fix a bug, it creates a Replay.io recording of your app and
 ```
 pnpm install
 pnpm build
-./node_modules/.bin/wrangler pages dev
+pnpm dev
 ```
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2a13c6b7..43acd180 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -16,7 +16,7 @@ const Nothing = () => null;
 
 export default function Index() {
   return (
-    <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
+    <div className="flex flex-col h-full min-h-screen w-full bg-bolt-elements-background-depth-1 dark:bg-black">
       <BackgroundRays />
       <Header />
       <Suspense fallback={<Nothing />}>
diff --git a/app/routes/problem.$id.tsx b/app/routes/problem.$id.tsx
index 50e04aae..674acadb 100644
--- a/app/routes/problem.$id.tsx
+++ b/app/routes/problem.$id.tsx
@@ -234,7 +234,7 @@ function ViewProblemPage() {
   return (
     <Suspense fallback={<Nothing />}>
       <TooltipProvider>
-        <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1 text-gray-900 dark:text-gray-200">
+        <div className="flex flex-col h-full min-h-screen w-full bg-bolt-elements-background-depth-1 text-gray-900 dark:text-gray-200">
           <BackgroundRays />
           <Header />
           <ClientOnly>{() => <Menu />}</ClientOnly>
diff --git a/app/routes/problems.tsx b/app/routes/problems.tsx
index 51c5a8c6..487835d4 100644
--- a/app/routes/problems.tsx
+++ b/app/routes/problems.tsx
@@ -109,7 +109,7 @@ function ProblemsPage() {
   return (
     <Suspense fallback={<Nothing />}>
       <TooltipProvider>
-        <div className="flex flex-col min-h-fit w-full bg-bolt-elements-background-depth-1 dark:bg-black text-gray-900 dark:text-gray-200">
+        <div className="flex flex-col min-h-fit min-h-screen w-full bg-bolt-elements-background-depth-1 dark:bg-black text-gray-900 dark:text-gray-200">
           <BackgroundRays />
           <Header />
           <ClientOnly>{() => <Menu />}</ClientOnly>