fix(app-file-manager): stack tags when container width is limited (#4241

)
webiny · Aug 28, 2024 · fcc7c1e · fcc7c1e
1 parent b988ac6
commit fcc7c1e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/...-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/TagsList.tsx b/...-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/TagsList.tsx
@@ -3,10 +3,8 @@ import { Loader } from "@webiny/app-aco";
 import { Empty } from "./Empty";
 import { Tag } from "./Tag";
 import { TagItem } from "@webiny/app-aco/types";
-import { Select } from "@webiny/ui/Select";
 import { useFileManagerView } from "~/modules/FileManagerRenderer/FileManagerViewProvider";
-import { Typography } from "@webiny/ui/Typography";
-import { TagListWrapper } from "./styled";
+import { TagListWrapper, TagsFilterSelect, TagsTitle } from "./styled";
 
 interface TagListProps {
     loading: boolean;
@@ -59,15 +57,14 @@ export const TagsList = ({
         return (
             <>
                 <TagListWrapper>
-                    <Typography use="subtitle1">Filter by tag</Typography>
+                    <TagsTitle use="subtitle1">Filter by tag</TagsTitle>
                     {tags.length > 1 ? (
-                        <Select
+                        <TagsFilterSelect
                             disabled={fmView.tags.activeTags.length < 2}
                             size={"small"}
                             value={fmView.tags.filterMode}
                             onChange={mode => fmView.tags.setFilterMode(mode)}
                             options={options}
-                            className="tag-filter"
                         />
                     ) : null}
                 </TagListWrapper>

diff --git a/...le-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/styled.tsx b/...le-manager/src/modules/FileManagerRenderer/FileManagerView/components/TagsList/styled.tsx
@@ -1,4 +1,6 @@
 import styled from "@emotion/styled";
+import { Select } from "@webiny/ui/Select";
+import { Typography } from "@webiny/ui/Typography";
 
 export const TagContainer = styled("div")`
     display: flex;
@@ -36,13 +38,21 @@ export const EmptyContainer = styled("div")`
     color: var(--webiny-theme-color-text-secondary);
     fill: currentColor;
 `;
+export const TagListWrapper = styled("div")`
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    margin: 8px;
+`;
 
-export const TagListWrapper = styled("div")({
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: 10,
-    padding: "0 10px",
-    ".tag-filter": {
-        width: 110
-    }
-});
+export const TagsFilterSelect = styled(Select)`
+    max-width: 150px;
+    min-width: auto;
+    flex-shrink: 0;
+`;
+
+export const TagsTitle = styled(Typography)`
+    margin: 0 0 5px;
+    flex: 1 1 auto;
+`;