refactor: filters flex

kubeshop · Dec 12, 2023 · cd0c3db · cd0c3db
1 parent 4694e27
commit cd0c3db
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/...es/web/src/components/organisms/EntityView/EntityViewFilters/EntityViewFilters.styled.tsx b/...es/web/src/components/organisms/EntityView/EntityViewFilters/EntityViewFilters.styled.tsx
@@ -3,13 +3,21 @@ import styled from 'styled-components';
 import {maxDevice} from '@styles/MediaQueries';
 
 export const FiltersContainer = styled.div`
-  display: inline-flex;
+  display: flex;
   flex-wrap: wrap;
   gap: 16px;
   align-items: center;
+  width: 100%;
 
-  & > * {
-    width: 248px;
+  & > *:not(:last-child) {
+    flex: 1 1 auto;
+    min-width: 160px;
+    max-width: 248px;
+  }
+
+  & > *:last-child {
+    flex: 0 0 auto;
+    width: max-content;
   }
 
   @media ${maxDevice.tablet} {

diff --git a/packages/web/src/components/organisms/EntityView/EntityViewFilters/EntityViewFilters.tsx b/packages/web/src/components/organisms/EntityView/EntityViewFilters/EntityViewFilters.tsx
@@ -19,6 +19,7 @@ const EntityViewFilters: FC<EntityFilters> = props => {
       <TextSearchFilter {...rest} disabled={disabled} />
       <LabelsFilter {...rest} disabled={disabled} />
       <StatusFilter {...rest} disabled={disabled} />
+
       {switchComponent ?? null}
     </S.FiltersContainer>
   );

diff --git a/...nents/organisms/EntityView/EntityViewFilters/TextSearchFilter/TextSearchFilter.styled.tsx b/...nents/organisms/EntityView/EntityViewFilters/TextSearchFilter/TextSearchFilter.styled.tsx
@@ -4,4 +4,5 @@ import styled from 'styled-components';
 
 export const SearchInput = styled(Input)`
   height: 46px;
+  width: auto;
 `;
diff --git a/packages/web/src/components/organisms/PageBlueprint/PageBlueprint.styled.tsx b/packages/web/src/components/organisms/PageBlueprint/PageBlueprint.styled.tsx
@@ -14,7 +14,8 @@ export const PageWrapper = styled.div`
 `;
 
 export const ToolbarContainer = styled.div`
-  display: flex;
+  display: grid;
+  grid-template-columns: 1fr max-content;
   flex-wrap: wrap;
   align-items: center;
   gap: 20px;