From da1b8137c2eabb919765960b14c89ad6ba1f926d Mon Sep 17 00:00:00 2001
From: Cao Hoang <65607230+cnhhoang850@users.noreply.github.com>
Date: Fri, 17 Jan 2025 15:40:16 +0700
Subject: [PATCH] fix: filters ui breaking on mobile in routing insights page
 (#18713)

---
 .../features/data-table/components/DataTableWrapper.tsx  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/features/data-table/components/DataTableWrapper.tsx b/packages/features/data-table/components/DataTableWrapper.tsx
index f6ff968e4f..81ce98b99b 100644
--- a/packages/features/data-table/components/DataTableWrapper.tsx
+++ b/packages/features/data-table/components/DataTableWrapper.tsx
@@ -61,11 +61,10 @@ export function DataTableWrapper<TData, TValue>({
       variant={variant}
       onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}>
       <DataTableToolbar.Root>
-        <div className="flex w-full flex-col gap-2 sm:flex-row">
-          <div className="flex w-full flex-wrap items-center justify-between gap-2">
-            <div className="flex justify-start gap-2">{ToolbarLeft}</div>
-            <div className="grow" />
-            <div className="flex justify-end gap-2">{ToolbarRight}</div>
+        <div className="flex w-full flex-col gap-2">
+          <div className="flex w-full flex-wrap justify-between gap-2">
+            <div className="flex flex-wrap gap-2">{ToolbarLeft}</div>
+            <div className="flex flex-wrap gap-2">{ToolbarRight}</div>
           </div>
         </div>