From 3c0c29b034db6187556436c5eba6acae2ef52b7b Mon Sep 17 00:00:00 2001
From: amitabhsahu <amitabh.sahu0008@gmail.com>
Date: Sun, 29 Oct 2023 18:54:23 +0530
Subject: [PATCH] fix: style change for filters in mobile

---
 apps/web/pages/bookings/[status].tsx                      | 8 +++-----
 .../features/bookings/components/FiltersContainer.tsx     | 4 ++--
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index eab9ad360c..1a8eeb4504 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -141,13 +141,11 @@ export default function Bookings() {
   return (
     <ShellMain hideHeadingOnMobile heading={t("bookings")} subtitle={t("bookings_description")}>
       <div className="flex flex-col">
-        <div className="flex flex-col flex-wrap lg:flex-row">
+        <div className="flex flex-row flex-wrap items-center justify-between">
           <HorizontalTabs tabs={tabs} />
-          <div className="max-w-full overflow-x-auto xl:ml-auto">
-            <FilterToggleCta />
-          </div>
+          <FilterToggleCta />
+          <FiltersContainer />
         </div>
-        <FiltersContainer />
         <main className="w-full">
           <div className="flex w-full flex-col" ref={animationParentRef}>
             {query.status === "error" && (
diff --git a/packages/features/bookings/components/FiltersContainer.tsx b/packages/features/bookings/components/FiltersContainer.tsx
index 5f54b2794d..82367c600b 100644
--- a/packages/features/bookings/components/FiltersContainer.tsx
+++ b/packages/features/bookings/components/FiltersContainer.tsx
@@ -85,7 +85,7 @@ export function FiltersContainer() {
   const isFiltersVisible = useBookingMultiFilterStore((state) => state.isFiltersVisible, shallow);
 
   return isFiltersVisible ? (
-    <div className="flex w-full space-x-2 rtl:space-x-reverse">
+    <div className="no-scrollbar flex w-full space-x-2 overflow-x-scroll rtl:space-x-reverse">
       <PeopleFilter />
       <EventTypeFilter />
       <TeamsFilter />
@@ -106,7 +106,7 @@ export function FilterToggleCta() {
   return (
     <button
       onClick={toggleFiltersVisibility}
-      className="hover:border-emphasis border-default text-default hover:text-emphasis flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
+      className="hover:border-emphasis border-default text-default hover:text-emphasis mb-4 flex h-9 max-h-72 items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm hover:cursor-pointer focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-800 focus:ring-offset-1">
       <Filter className="h-4 w-4" />
       <Tooltip content={t("filters")}>
         <div className="mx-2">{t("filters")}</div>