fix(FilterBar): search field within dialog expands to available width

SAP · Aug 3, 2020 · fef8a8b · fef8a8b
1 parent ed0944e
commit fef8a8b
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/packages/main/src/components/FilterBar/FilterBarDialog.jss.ts b/packages/main/src/components/FilterBar/FilterBarDialog.jss.ts
@@ -11,6 +11,7 @@ const styles = {
     maxHeight: '70vh'
   },
   header: {
+    width: '100%',
     padding: '0.25rem 1rem 0 1rem',
     '& *': {
       margin: '0.25rem 0 0.25rem 0'

diff --git a/packages/main/src/components/FilterBar/FilterDialog.tsx b/packages/main/src/components/FilterBar/FilterDialog.tsx
@@ -179,7 +179,7 @@ export const FilterDialog = (props) => {
 
   const renderHeader = useCallback(
     () => (
-      <FlexBox direction={FlexBoxDirection.Column} className={classes.header}>
+      <FlexBox direction={FlexBoxDirection.Column} alignItems={FlexBoxAlignItems.Center} className={classes.header}>
         <Title level={TitleLevel.H4}>Filters</Title>
         {showSearch && (
           <Input placeholder={searchForFiltersText} onInput={handleSearch} icon={<Icon name="search" />} />