From 21d3565e00060e86c763bfe9f1960f564a2e36c3 Mon Sep 17 00:00:00 2001
From: Merlin Pannewitz <merlin.pannewitz@digitalservice.bund.de>
Date: Thu, 9 Jan 2025 16:49:27 +0100
Subject: [PATCH] Set bg color of main depending on child page

This is more of a workaround to set the background color for the question pages so that the blue background expands to the footer. Expanding the whole page <div> is not easily possible with CSS since the <main> element is child of a flex and does not have a pre-defined height. If one finds a better solution, please feel free to replace this.
---
 packages/dito/app/root.tsx                                 | 2 +-
 packages/dito/app/routes/vorpruefung.$questionId/route.tsx | 2 +-
 packages/dito/app/routes/vorpruefung.hinweise.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dito/app/root.tsx b/packages/dito/app/root.tsx
index 5aa9cc3d..e54c37a6 100644
--- a/packages/dito/app/root.tsx
+++ b/packages/dito/app/root.tsx
@@ -299,7 +299,7 @@ export default function App() {
         />
       }
     >
-      <main className="grow">
+      <main className="grow [&:has(.main-bg-blue)]:bg-blue-100">
         <Outlet context={{ featureFlags }} />
       </main>
     </Document>
diff --git a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
index 97aa8257..ac8a59ec 100644
--- a/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
+++ b/packages/dito/app/routes/vorpruefung.$questionId/route.tsx
@@ -154,7 +154,7 @@ export default function Index() {
   );
 
   return (
-    <div className="flex bg-blue-100 sm:pt-32">
+    <div className="flex bg-blue-100 sm:pt-32 main-bg-blue">
       <div className="hidden lg:block flex-none pl-32">
         <PreCheckNavigation question={question} answers={answers ?? {}} />
       </div>
diff --git a/packages/dito/app/routes/vorpruefung.hinweise.tsx b/packages/dito/app/routes/vorpruefung.hinweise.tsx
index 31d88081..1ddbbb4d 100644
--- a/packages/dito/app/routes/vorpruefung.hinweise.tsx
+++ b/packages/dito/app/routes/vorpruefung.hinweise.tsx
@@ -26,7 +26,7 @@ export async function loader({ request }: LoaderFunctionArgs) {
 export default function GeneralInfo() {
   const { answers } = useLoaderData<typeof loader>();
   return (
-    <div className="flex grow bg-blue-100 sm:pt-32 w-full h-full">
+    <div className="flex bg-blue-100 sm:pt-32 main-bg-blue">
       <div className="hidden lg:block flex-none pl-32">
         <PreCheckNavigation answers={answers ?? {}} />
       </div>