From a40522df8ca7312b39773309a4b9206516283ebf Mon Sep 17 00:00:00 2001
From: Mohamed Marrouchi <marrouchi.mohamed@gmail.com>
Date: Thu, 21 Nov 2024 20:52:14 +0100
Subject: [PATCH] fix: scrollable flow tabs

---
 .../components/visual-editor/v2/Diagrams.tsx  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/visual-editor/v2/Diagrams.tsx b/frontend/src/components/visual-editor/v2/Diagrams.tsx
index 52481a6..8e2a478 100644
--- a/frontend/src/components/visual-editor/v2/Diagrams.tsx
+++ b/frontend/src/components/visual-editor/v2/Diagrams.tsx
@@ -89,7 +89,10 @@ const Diagrams = () => {
   const { data: categories } = useFind(
     { entity: EntityType.CATEGORY },
     {
-      hasCount: false,
+      initialPaginationState: {
+        page: 0,
+        pageSize: 999, // @TODO: We need to display all categories
+      },
       initialSortState: [{ field: "createdAt", sort: "asc" }],
     },
     {
@@ -532,7 +535,23 @@ const Diagrams = () => {
                 [`& .${tabsClasses.indicator}`]: {
                   display: "none",
                 },
+                "& .MuiTabs-scrollButtons": {
+                  opacity: 0.8,
+                  backgroundColor: "#1ca089",
+                  borderTop: "1px solid #137261",
+                  marginTop: "7px",
+                  color: "#FFF",
+                  overflow: "visible",
+                  boxShadow:
+                    "-20px 0px 20px -20px rgba(0, 0, 0, 0.5), 0px 2px 9px 0px rgba(0, 0, 0, 0.5)",
+                  zIndex: 10,
+                  "&:hover": {
+                    opacity: 1,
+                  },
+                },
               }}
+              variant="scrollable"
+              allowScrollButtonsMobile
             >
               {categories?.map(({ id, label }) => (
                 <Tab