From 65b0514b40243b093b28bdf40e8829aa6abe14b3 Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Thu, 19 Feb 2026 15:48:27 -0500
Subject: [PATCH] fix: remove bg-black from PageLoader and RouteError, fix
 PageLoader height

PageLoader used h-screen inside a grid cell, causing it to overflow.
Changed to h-full so it fits within the main-content area. Removed
bg-black from both PageLoader and RouteError in favor of theme-aware
bg-background to prevent black flash during lazy loading.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/components/common/PageLoader.tsx | 2 +-
 frontend/src/components/common/RouteError.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/common/PageLoader.tsx b/frontend/src/components/common/PageLoader.tsx
index 0db230bd..04c54daa 100644
--- a/frontend/src/components/common/PageLoader.tsx
+++ b/frontend/src/components/common/PageLoader.tsx
@@ -2,7 +2,7 @@ import { Spinner } from '@/components/common/Spinner'
 
 export function PageLoader() {
   return (
-    <div className="flex h-screen items-center justify-center bg-black">
+    <div className="flex h-full items-center justify-center">
       <div className="flex flex-col items-center gap-4">
         <Spinner size="lg" />
         <p className="text-sm text-muted-foreground">Loading...</p>
diff --git a/frontend/src/components/common/RouteError.tsx b/frontend/src/components/common/RouteError.tsx
index 0fa4e7e9..e06c3082 100644
--- a/frontend/src/components/common/RouteError.tsx
+++ b/frontend/src/components/common/RouteError.tsx
@@ -17,7 +17,7 @@ export function RouteError() {
   }
 
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-black p-8">
+    <div className="flex min-h-screen flex-col items-center justify-center bg-background p-8">
       <div className="max-w-md text-center">
         <h1 className="mb-2 text-4xl font-bold text-foreground">Oops!</h1>
         <h2 className="mb-2 text-xl font-semibold text-red-400">{errorMessage}</h2>