Visual improvements

demo/src/main/resources/static/css/home.css

@@ -9,21 +9,21 @@
 
 /* login.css */
 body, html {
-  height: 100%;
+  height: 100vh;
   margin: 0;
   font-family: 'Roboto', sans-serif;
   background-color: var(--pale-yellow);
+  overflow: clip;
 }
 
 .body {
   display: flex;
+  flex-direction: row;
   height: 100%;
 }
 
 /* Header Styles */
 .top-header {
-  position: sticky;
-  top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -48,11 +48,13 @@ body, html {
 }
 
 .body-left {
+  position: sticky;
   flex-grow: 0;
   width: 400px;
 }
 
 .body-right {
+  position: sticky;
   flex-grow: 0;
   width: 400px;
 }
@@ -183,29 +185,39 @@ body, html {
   display: flex;
   justify-content: center;
   align-items: flex-start;
+  overflow: scroll;
+  height: 100%;
 }
 
 .recipe-card {
+    margin-top: 35px;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     gap: 35px;
     justify-content: flex-start;
     flex-direction: row;
+    height: fit-content;
 }
 
 .card {
     display: flex;
     align-items: center;
     gap: 10px;
+    max-height: 200px;
     
-    flex: 0.2 0.2 260px;
-    max-width: 300px;
+    flex: 1 1 260px;
+    max-width: 400px;
     background: var(--peach);
     border-radius: 12px;
     padding: 20px;
 }
 
+.card .card-text {
+    height: 100%;
+    overflow: scroll;
+}
+
 .card img {
     width: 100%;
     height: 100px;