fix(FilterBar): display action buttons in same row as filters if toolbar is hidden (#5246)

Lukas742 · web-flow · commit db639ddbb0c9 · 2023-11-15T08:07:40.000+01:00
Fixes #5244
diff --git a/packages/main/src/components/FilterBar/index.tsx b/packages/main/src/components/FilterBar/index.tsx
@@ -610,8 +610,8 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>
       }
       const usedSpaceLastRow = filterItemsWidth % filterAreaWidth;
       const emptySpaceLastRow = filterAreaWidth - usedSpaceLastRow;
-      // deduct width of buttons container of the empty space in the last row to calculate number of spacers
-      const numberOfSpacers = Math.floor((emptySpaceLastRow - filterBarButtonsWidth) / firstChildWidth);
+      // deduct width of buttons container of the empty space in the last row to calculate number of spacers (-1 because of "lastSpacer")
+      const numberOfSpacers = Math.floor((emptySpaceLastRow - filterBarButtonsWidth) / firstChildWidth) - 1;
       for (let i = 0; i < numberOfSpacers; i++) {
         spacers.push(<div key={`filter-spacer-${i}`} className={classes.spacer} />);
       }

Original file line number	Diff line number	Diff line change
`@@ -610,8 +610,8 @@ const FilterBar = forwardRef<HTMLDivElement, FilterBarPropTypes>((props, ref) =>`
`610`	`610`	`}`
`611`	`611`	`const usedSpaceLastRow = filterItemsWidth % filterAreaWidth;`
`612`	`612`	`const emptySpaceLastRow = filterAreaWidth - usedSpaceLastRow;`
`613`		`- // deduct width of buttons container of the empty space in the last row to calculate number of spacers`
`614`		`- const numberOfSpacers = Math.floor((emptySpaceLastRow - filterBarButtonsWidth) / firstChildWidth);`
	`613`	`+ // deduct width of buttons container of the empty space in the last row to calculate number of spacers (-1 because of "lastSpacer")`
	`614`	`+ const numberOfSpacers = Math.floor((emptySpaceLastRow - filterBarButtonsWidth) / firstChildWidth) - 1;`
`615`	`615`	`for (let i = 0; i < numberOfSpacers; i++) {`
`616`	`616`	spacers.push(<div key={`filter-spacer-${i}`} className={classes.spacer} />);
`617`	`617`	`}`