From 0fbb828587bb414209181691d588bc772d5e9b79 Mon Sep 17 00:00:00 2001
From: Palabola <hodobalazs@gmail.com>
Date: Tue, 1 Oct 2024 14:11:15 +0200
Subject: [PATCH 1/2] DEV-382

---
 .../search-bar/search-bar.component.html         |  2 +-
 .../search-bar/search-bar.component.scss         | 16 ++++++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/app/components/search-bar/search-bar.component.html b/src/app/components/search-bar/search-bar.component.html
index 04a4f9a0..bd54b35f 100644
--- a/src/app/components/search-bar/search-bar.component.html
+++ b/src/app/components/search-bar/search-bar.component.html
@@ -9,7 +9,7 @@
     </button>
   </div>
 
-  <div class="filters overflow-hidden bg-secondary">
+  <div class="filters overflow-auto bg-secondary">
     <div class="mx-2 p-3 border-b border-gray-200 " *ngFor="let item of filterCategories" >
       <div class="flex justify-between cursor-pointer" (click)="toggleCategory(item)" tabindex="0">
         <div class="text-white flex gap-2 items-center">
diff --git a/src/app/components/search-bar/search-bar.component.scss b/src/app/components/search-bar/search-bar.component.scss
index a28ae70f..c34f5b0f 100644
--- a/src/app/components/search-bar/search-bar.component.scss
+++ b/src/app/components/search-bar/search-bar.component.scss
@@ -24,4 +24,20 @@
     top: 2.25rem;
     transform: translateY(-2rem);
   }
+
+  ::-webkit-scrollbar {
+    width: 5px; /* width of the entire scrollbar */
+    height: 5px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-secondary;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #9CA3AF;
+    border-radius: 20px; /* roundness of the scroll thumb */
+    border: 3px solid #9CA3AF; /* creates padding around scroll thumb */
+  }
+
 }

From 1ec5781673d5d8dec510baa133f2261179c4572f Mon Sep 17 00:00:00 2001
From: Palabola <hodobalazs@gmail.com>
Date: Wed, 2 Oct 2024 10:48:49 +0200
Subject: [PATCH 2/2] try min-height instead of height

---
 .../search-bar/search-bar.component.html       |  2 +-
 .../search-bar/search-bar.component.scss       | 18 +-----------------
 2 files changed, 2 insertions(+), 18 deletions(-)

diff --git a/src/app/components/search-bar/search-bar.component.html b/src/app/components/search-bar/search-bar.component.html
index bd54b35f..04a4f9a0 100644
--- a/src/app/components/search-bar/search-bar.component.html
+++ b/src/app/components/search-bar/search-bar.component.html
@@ -9,7 +9,7 @@
     </button>
   </div>
 
-  <div class="filters overflow-auto bg-secondary">
+  <div class="filters overflow-hidden bg-secondary">
     <div class="mx-2 p-3 border-b border-gray-200 " *ngFor="let item of filterCategories" >
       <div class="flex justify-between cursor-pointer" (click)="toggleCategory(item)" tabindex="0">
         <div class="text-white flex gap-2 items-center">
diff --git a/src/app/components/search-bar/search-bar.component.scss b/src/app/components/search-bar/search-bar.component.scss
index c34f5b0f..febafe17 100644
--- a/src/app/components/search-bar/search-bar.component.scss
+++ b/src/app/components/search-bar/search-bar.component.scss
@@ -15,7 +15,7 @@
   .filters {
     border-right: 1px solid #34D399;
     padding-bottom: 1rem;
-    height: calc(100% - 4rem);
+    min-height: calc(100% - 4rem);
   }
 
   .unit {
@@ -24,20 +24,4 @@
     top: 2.25rem;
     transform: translateY(-2rem);
   }
-
-  ::-webkit-scrollbar {
-    width: 5px; /* width of the entire scrollbar */
-    height: 5px;
-  }
-
-  ::-webkit-scrollbar-track {
-    @apply bg-secondary;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    background-color: #9CA3AF;
-    border-radius: 20px; /* roundness of the scroll thumb */
-    border: 3px solid #9CA3AF; /* creates padding around scroll thumb */
-  }
-
 }