Fixed cramped filter rows in QuickFilters

equinor · Feb 15, 2024 · e973f72 · e973f72
1 parent 7357bfc
commit e973f72
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/packages/power-bi/src/lib/components/QuickFilter/QuickFilter.tsx b/packages/power-bi/src/lib/components/QuickFilter/QuickFilter.tsx
@@ -103,10 +103,14 @@ const StyledFilterButtons = styled.div`
 const StyledQuickFilterWrapper = styled.div`
   display: grid;
   width: 100%;
-  justify-content: flex-end;
-  grid-template-columns: repeat(auto-fit, minmax(60px, max-content));
-  gap: 2em;
+  justify-content: flex-start;
+  grid-template-columns: repeat(auto-fit, minmax(max-content, 50px));
   grid-template-rows: 1fr;
+  gap: 10px;
+  align-items: center;
+  overflow-x: hidden;
+  padding-left: 10px;
+  padding-right: 10px;
 `;
 
 const FilterButtonContainer = styled.div`

diff --git a/packages/power-bi/src/lib/components/quickFilterGroup/QuickFilterGroup.tsx b/packages/power-bi/src/lib/components/quickFilterGroup/QuickFilterGroup.tsx
@@ -24,8 +24,9 @@ export const PowerBiFilterGroup = ({
 
   if (!activeFilters) return null;
   const isAllChecked = activeFilters.length === 0 || activeFilters.length === group.filterVals.length;
+
   return (
-    <div style={{ height: '50px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+    <>
       <StyledFilterGroupWrapper onClick={() => setIsOpen((s) => !s)} ref={anchorEl}>
         <div>
           {getFilterHeaderText(
@@ -48,6 +49,6 @@ export const PowerBiFilterGroup = ({
           onCloseMenu={() => setIsOpen(false)}
         />
       )}
-    </div>
+    </>
   );
 };
diff --git a/packages/power-bi/src/lib/components/quickFilterGroup/quickFilterGroup.styles.ts b/packages/power-bi/src/lib/components/quickFilterGroup/quickFilterGroup.styles.ts
@@ -2,12 +2,12 @@ import { tokens } from '@equinor/eds-tokens';
 import styled from 'styled-components';
 
 export const StyledFilterGroupWrapper = styled.div`
-  height: auto;
-  width: auto;
+  height: 50px;
+  width: min-content;
   display: flex;
   align-items: center;
   cursor: pointer;
-
+  justify-content: center;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;