From f18d73f3a01eb5495f687333d733f83e1dd146c9 Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Thu, 26 Oct 2023 21:48:21 +0800
Subject: [PATCH 1/3] Style the modal scrollbar

---
 Food-Recipe/styles.css | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/Food-Recipe/styles.css b/Food-Recipe/styles.css
index 194e030..0651c59 100644
--- a/Food-Recipe/styles.css
+++ b/Food-Recipe/styles.css
@@ -266,7 +266,9 @@ button:hover {
 
   width: 95%;
   max-height: 90%;
-  overflow-y: auto;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: var(--clr-black) transparent;
 
   border-radius: 1em;
   padding: 1em 2em 2em 2em;
@@ -275,6 +277,19 @@ button:hover {
   z-index: 2;
 }
 
+.modal::-webkit-scrollbar {
+  width: 10px;
+}
+
+.modal::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.modal::-webkit-scrollbar-thumb {
+  background-color: var(--clr-black);
+  border-radius: 20px;
+}
+
 .modal h3 {
   font-size: var(--fs-3);
   margin-bottom: 1rem;

From 80caa9ee731b1ad34ef0fd2a4d18bda6a466cd7a Mon Sep 17 00:00:00 2001
From: andreimaier <113696878+andreimaier@users.noreply.github.com>
Date: Fri, 27 Oct 2023 09:40:35 +0800
Subject: [PATCH 2/3] Update styles.css

---
 Food-Recipe/styles.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/Food-Recipe/styles.css b/Food-Recipe/styles.css
index 0651c59..9b2252c 100644
--- a/Food-Recipe/styles.css
+++ b/Food-Recipe/styles.css
@@ -266,10 +266,7 @@ button:hover {
 
   width: 95%;
   max-height: 90%;
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  scrollbar-color: var(--clr-black) transparent;
-
+  overflow-y: auto;
   border-radius: 1em;
   padding: 1em 2em 2em 2em;
   border: 0.2em solid var(--clr-black);
@@ -286,9 +283,12 @@ button:hover {
 }
 
 .modal::-webkit-scrollbar-thumb {
-  background-color: var(--clr-black);
+  background-color: #b1b1b1;
   border-radius: 20px;
 }
+.modal::-webkit-scrollbar-button {
+  background-color: transparent; /*Set the background color of the buttons. Give some padding to the top and bottom of the scrollbar. */
+}
 
 .modal h3 {
   font-size: var(--fs-3);

From f993158aaa31a7a8703876ebbcf2cc4f9fe80027 Mon Sep 17 00:00:00 2001
From: andreimaier <113696878+andreimaier@users.noreply.github.com>
Date: Fri, 27 Oct 2023 10:05:45 +0800
Subject: [PATCH 3/3] add linear gradient to avoid overflow on mobile

---
 Food-Recipe/styles.css | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/Food-Recipe/styles.css b/Food-Recipe/styles.css
index 9b2252c..01147a3 100644
--- a/Food-Recipe/styles.css
+++ b/Food-Recipe/styles.css
@@ -283,7 +283,14 @@ button:hover {
 }
 
 .modal::-webkit-scrollbar-thumb {
-  background-color: #b1b1b1;
+  background: rgb(58, 180, 170);
+  background: linear-gradient(
+    180deg,
+    rgba(58, 180, 170, 0) 1%,
+    rgba(215, 215, 215, 1) 10%,
+    rgba(215, 215, 215, 1) 90%,
+    rgba(124, 69, 252, 0) 100%
+  );
   border-radius: 20px;
 }
 .modal::-webkit-scrollbar-button {
@@ -391,6 +398,9 @@ footer {
   .search-section form {
     grid-template-columns: 2fr 1fr;
   }
+  .modal::-webkit-scrollbar-thumb {
+    background: #b1b1b1;
+  }
 }
 
 /* Tablet screen size */