From c214e01f0301a1bb30fc0ecd105b339e1b22aee6 Mon Sep 17 00:00:00 2001
From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Date: Sat, 7 Jan 2023 15:30:11 +0530
Subject: [PATCH] fix: use overflow-auto (#6295)

* fix: use overflow-auto

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* fix: scroll issues with too many filters

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: merge conflict

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
---
 packages/features/bookings/components/FiltersContainer.tsx | 2 +-
 packages/features/bookings/layout/BookingLayout.tsx        | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/features/bookings/components/FiltersContainer.tsx b/packages/features/bookings/components/FiltersContainer.tsx
index eb8566d2aa..9299875861 100644
--- a/packages/features/bookings/components/FiltersContainer.tsx
+++ b/packages/features/bookings/components/FiltersContainer.tsx
@@ -29,7 +29,7 @@ const filters: Filter[] = [
 
 export function FiltersContainer() {
   return (
-    <div className="flex w-full space-x-2 overflow-x-scroll rtl:space-x-reverse lg:justify-end ">
+    <div className="flex w-full space-x-2 rtl:space-x-reverse">
       {filters.map((filter) => {
         if (!filter.showByDefault) {
           // TODO: check if any of the controllingQueryParams are present in the query params and show the filter if so
diff --git a/packages/features/bookings/layout/BookingLayout.tsx b/packages/features/bookings/layout/BookingLayout.tsx
index 20bd6590f7..47c5008d9f 100644
--- a/packages/features/bookings/layout/BookingLayout.tsx
+++ b/packages/features/bookings/layout/BookingLayout.tsx
@@ -35,9 +35,11 @@ export default function BookingLayout({
   return (
     <Shell {...rest}>
       <div className="flex max-w-6xl flex-col">
-        <div className="flex  flex-col lg:flex-row">
+        <div className="flex flex-col gap-2 lg:flex-row">
           <HorizontalTabs tabs={tabs} />
-          <FiltersContainer />
+          <div className="overflow-x-auto lg:ml-auto">
+            <FiltersContainer />
+          </div>
         </div>
         <main className="w-full max-w-6xl">{children}</main>
       </div>