From c1d668cf9197c26178a5064eb3be060bc656cb39 Mon Sep 17 00:00:00 2001
From: FlorianSpeicher <flo200538@gmail.com>
Date: Wed, 21 May 2025 21:36:03 +0200
Subject: [PATCH] Refactored Homepage css

---
 01-frontend/src/pages/Home.tsx  |  2 +-
 01-frontend/src/pages/pages.css | 24 ++++++++++++++++--------
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/01-frontend/src/pages/Home.tsx b/01-frontend/src/pages/Home.tsx
index b1f87f2..600c231 100644
--- a/01-frontend/src/pages/Home.tsx
+++ b/01-frontend/src/pages/Home.tsx
@@ -178,7 +178,7 @@ export default function Home() {
                 onChange={handlePageChange} // Seitenwechsel-Handler
                 variant="outlined"
                 shape="rounded"
-                sx={{ marginTop: 2 }}
+                className="pagination" // CSS-Klasse für die Pagination
             />
         </div>
     );
diff --git a/01-frontend/src/pages/pages.css b/01-frontend/src/pages/pages.css
index f98c581..30882f9 100644
--- a/01-frontend/src/pages/pages.css
+++ b/01-frontend/src/pages/pages.css
@@ -42,24 +42,32 @@
   background-color: #115293;
 }
 
-cardgrid {
+.cardgrid {
     display: grid;
     gap: 2%;
-    max-width: 3%;
+    width: 90%;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dynamische Spalten */
+    padding: 16px;
+    margin-top: auto;
+    max-height: calc(100vh - 200px); /* Dynamische Höhe, abhängig von anderen Inhalten */
+    margin: 0 auto;
 }
 
 .page-background {
     background: linear-gradient(135deg, #ece9e6, #ffffff);
-    min-height: 100vh; /* Damit der Hintergrund die gesamte Seite abdeckt */
+    height: 100vh; /* Damit der Hintergrund die gesamte Seite abdeckt */
+    min-height: 600px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
+    padding: 20px 0; /* Abstand oben und unten */
+    box-sizing: border-box; /* Stellt sicher, dass Padding in die Höhe einbezogen wird */
 }
 
-.cardgrid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
-  gap: 16px;
-  padding: 16px;
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 5%;
 }
\ No newline at end of file