From 18726f12dabcfdb85669792103a34efd8918a4fc Mon Sep 17 00:00:00 2001
From: Miro <mirek@fizen.com>
Date: Fri, 5 Sep 2025 16:04:21 +0200
Subject: [PATCH] Issue 4062 Filter ans Sorting Icons goes to new line

---
 .../components/molecules/DataActionsBar.tsx   |  75 +++++-----
 .../organisms/DashboardDrawerMobile.tsx       | 129 ++++++++++--------
 2 files changed, 114 insertions(+), 90 deletions(-)

diff --git a/govtool/frontend/src/components/molecules/DataActionsBar.tsx b/govtool/frontend/src/components/molecules/DataActionsBar.tsx
index 7839af965..f8de6e97c 100644
--- a/govtool/frontend/src/components/molecules/DataActionsBar.tsx
+++ b/govtool/frontend/src/components/molecules/DataActionsBar.tsx
@@ -74,8 +74,9 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
         alignItems="center"
         display="flex"
         justifyContent="space-between"
-        gap={1.5}
-        flexWrap="wrap"
+        gap={{ xs: 0.75, sm: 1.5 }}
+        flexWrap="nowrap"
+        width="100%"
       >
         <InputBase
           inputProps={{ "data-testid": "search-input" }}
@@ -113,38 +114,47 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
             fontWeight: 500,
             height: 48,
             padding: "16px 24px",
-            maxWidth: 500,
-            flex: "0 0 auto",
+            flex: "1 1 auto",
+            minWidth: 0,
+            maxWidth: "none",
           }}
         />
 
-        <OrderActionsChip
-          chosenFiltersLength={chosenFiltersLength}
-          filtersOpen={effectiveFiltersOpen}
-          isFiltering={isFiltering}
-          setFiltersOpen={setEffectiveFiltersOpen}
-          chosenSorting={chosenSorting}
-          setSortOpen={setEffectiveSortOpen}
-          sortOpen={effectiveSortOpen}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            gap: { xs: 0.5, sm: 1.25 },
+          }}
         >
-          {effectiveFiltersOpen && (
-            <DataActionsFilters
-              chosenFilters={chosenFilters}
-              setChosenFilters={setChosenFilters}
-              closeFilters={closeFilters}
-              options={filterOptions}
-              title={filtersTitle}
-            />
-          )}
-          {effectiveSortOpen && (
-            <DataActionsSorting
-              chosenSorting={chosenSorting}
-              setChosenSorting={setChosenSorting}
-              closeSorts={closeSorts}
-              options={sortOptions}
-            />
-          )}
-        </OrderActionsChip>
+          <OrderActionsChip
+            chosenFiltersLength={chosenFiltersLength}
+            filtersOpen={effectiveFiltersOpen}
+            isFiltering={isFiltering}
+            setFiltersOpen={setEffectiveFiltersOpen}
+            chosenSorting={chosenSorting}
+            setSortOpen={setEffectiveSortOpen}
+            sortOpen={effectiveSortOpen}
+          >
+            {effectiveFiltersOpen && (
+              <DataActionsFilters
+                chosenFilters={chosenFilters}
+                setChosenFilters={setChosenFilters}
+                closeFilters={closeFilters}
+                options={filterOptions}
+                title={filtersTitle}
+              />
+            )}
+            {effectiveSortOpen && (
+              <DataActionsSorting
+                chosenSorting={chosenSorting}
+                setChosenSorting={setChosenSorting}
+                closeSorts={closeSorts}
+                options={sortOptions}
+              />
+            )}
+          </OrderActionsChip>
+        </Box>
       </Box>
 
       {selectedFilterItems.length > 0 && (
@@ -153,10 +163,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({
           flexWrap="wrap"
           gap={1}
           alignItems="flex-start"
-          sx={{
-            mt: 2,
-            "& > *": { flex: "0 0 auto", alignSelf: "flex-start" },
-          }}
+          sx={{ mt: 2, "& > *": { flex: "0 0 auto", alignSelf: "flex-start" } }}
         >
           {selectedFilterItems.map(({ key, label }) => (
             <ChipButton
diff --git a/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx b/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx
index 704d2f1ed..69ef898df 100644
--- a/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx
+++ b/govtool/frontend/src/components/organisms/DashboardDrawerMobile.tsx
@@ -11,24 +11,34 @@ import { useFeatureFlag } from "@context";
 import { DashboardDrawerMobileProps } from "./types";
 
 const DRAWER_PADDING = 2;
-// 8 is number of multiple in Material UI 2 is left and right side
 const CALCULATED_DRAWER_PADDING = DRAWER_PADDING * 8 * 2;
 
+type DrawerLinkBase = {
+  dataTestId?: string;
+  label: string;
+  navTo: string;
+  newTabLink?: string;
+};
+
+type NavItem = DrawerLinkBase & {
+  childNavItems?: DrawerLinkBase[];
+};
+
 export const DashboardDrawerMobile = ({
   isDrawerOpen,
   setIsDrawerOpen,
 }: DashboardDrawerMobileProps) => {
-  const { isProposalDiscussionForumEnabled, isGovernanceOutcomesPillarEnabled } = useFeatureFlag();
+  const {
+    isProposalDiscussionForumEnabled,
+    isGovernanceOutcomesPillarEnabled,
+  } = useFeatureFlag();
   const { screenWidth } = useScreenDimension();
   const { voter } = useGetVoterInfo();
 
-  const openDrawer = () => {
-    setIsDrawerOpen(true);
-  };
+  const openDrawer = () => setIsDrawerOpen(true);
+  const closeDrawer = () => setIsDrawerOpen(false);
 
-  const closeDrawer = () => {
-    setIsDrawerOpen(false);
-  };
+  const navItems = CONNECTED_NAV_ITEMS as unknown as NavItem[];
 
   return (
     <SwipeableDrawer
@@ -73,65 +83,72 @@ export const DashboardDrawerMobile = ({
                 <img alt="drawer" src={ICONS.closeDrawerIcon} />
               </IconButton>
             </Box>
+
             <Grid container direction="column" rowGap={4} mt={6}>
-              {CONNECTED_NAV_ITEMS.map((navItem) => (
-                <Grid item>
+              {navItems.map((navItem, i) => (
+                <Grid
+                  item
+                  key={
+                    navItem.dataTestId ??
+                    navItem.label ??
+                    navItem.navTo ??
+                    `nav-${i}`
+                  }
+                >
                   <Link
                     {...navItem}
                     size="big"
                     onClick={() => {
-                        if (navItem.newTabLink) {
-                          openInNewTab(navItem.newTabLink);
-                        }
-                        setIsDrawerOpen(false);
-                      }}
+                      if (navItem.newTabLink) openInNewTab(navItem.newTabLink);
+                      setIsDrawerOpen(false);
+                    }}
                     isConnectWallet
                   />
-                  {navItem.childNavItems && (
-                  <Grid
-                    container
-                    direction="column"
-                    rowGap={4}
-                    mt={3}
-                    pl={3}
-                  >
-                    {navItem.childNavItems.map((childItem) => {
-                          if (
-                            !isProposalDiscussionForumEnabled &&
-                            childItem.dataTestId === "proposal-discussion-link"
-                          ) {
-                            return null;
-                          }
-
-                          if (
-                            !isGovernanceOutcomesPillarEnabled &&
-                            (childItem.dataTestId === "governance-actions-voted-by-me-link" ||
-                              childItem.dataTestId === "governance-actions-outcomes-link")
-                          ) {
-                            return null;
-                          }
 
-                          return (
-                            <Link
-                              key={childItem.label}
-                              {...childItem}
-                              size="big"
-                              onClick={() => {
-                                if (childItem.newTabLink) {
-                                  openInNewTab(childItem.newTabLink);
-                                }
-                                setIsDrawerOpen(false);
-                              }}
-                              isConnectWallet
-                            />
-                          );
-                        })}
-                  </Grid>
-                    )}
+                  {!!navItem.childNavItems?.length && (
+                    <Grid container direction="column" rowGap={4} mt={3} pl={3}>
+                      {navItem.childNavItems.map((childItem, ci) => {
+                        if (
+                          !isProposalDiscussionForumEnabled &&
+                          childItem.dataTestId === "proposal-discussion-link"
+                        ) {
+                          return null;
+                        }
+                        if (
+                          !isGovernanceOutcomesPillarEnabled &&
+                          (childItem.dataTestId ===
+                            "governance-actions-voted-by-me-link" ||
+                            childItem.dataTestId ===
+                              "governance-actions-outcomes-link")
+                        ) {
+                          return null;
+                        }
+                        return (
+                          <Link
+                            key={
+                              childItem.dataTestId ??
+                              childItem.label ??
+                              childItem.navTo ??
+                              `child-${i}-${ci}`
+                            }
+                            {...childItem}
+                            size="big"
+                            onClick={() => {
+                              if (childItem.newTabLink)
+                                openInNewTab(childItem.newTabLink);
+                              setIsDrawerOpen(false);
+                            }}
+                            isConnectWallet
+                          />
+                        );
+                      })}
+                    </Grid>
+                  )}
                 </Grid>
-                ))}
+              ))}
             </Grid>
           </Box>
+
           {(voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter) && (
             <DRepInfoCard />
           )}