chore(FilterBar): more post wc update fixes (#4680)

Author: Lukas742

packages/base/src/styling/CssSizeVariables.ts

@@ -1,3 +1,5 @@
+import { ThemingParameters } from './ThemingParameters.js';
+
 export enum CssSizeVariablesNames {
   sapWcrBarHeight = '--sapWcrBarHeight',
   sapWcrButtonTopBottomPadding = '--sapWcrButtonTopBottomPadding',
@@ -18,7 +20,8 @@ export enum CssSizeVariablesNames {
   sapWcrMessageViewListItemHeightByLine = '--sapWcrMessageViewListItemHeightByLine',
   sapWcrSplitterSize = '--sapWcrSplitterSize',
   sapWcrDialogHeaderHeight = '--sapWcrDialogHeaderHeight',
-  sapWcrDialogSubHeaderHeight = '--sapWcrDialogSubHeaderHeight'
+  sapWcrDialogSubHeaderHeight = '--sapWcrDialogSubHeaderHeight',
+  sawWcrElementHeight = '--sawWcrElementHeight'
 }
 
 export const CssSizeVariables = new Proxy(CssSizeVariablesNames, {
@@ -45,7 +48,8 @@ export const CozySizes = {
   [CssSizeVariablesNames.sapWcrMessageViewListItemHeightByLine]: `3.325rem`,
   [CssSizeVariablesNames.sapWcrSplitterSize]: `1rem`,
   [CssSizeVariablesNames.sapWcrDialogHeaderHeight]: '2.75rem',
-  [CssSizeVariablesNames.sapWcrDialogSubHeaderHeight]: '3rem'
+  [CssSizeVariablesNames.sapWcrDialogSubHeaderHeight]: '3rem',
+  [CssSizeVariablesNames.sawWcrElementHeight]: ThemingParameters.sapElement_Height
 };
 
 export const CompactSizes = {
@@ -67,5 +71,6 @@ export const CompactSizes = {
   [CssSizeVariablesNames.sapWcrMessageViewListItemHeightSingle]: `2rem`,
   [CssSizeVariablesNames.sapWcrMessageViewListItemHeightByLine]: `3.25rem`,
   [CssSizeVariablesNames.sapWcrDialogHeaderHeight]: '2.5rem',
-  [CssSizeVariablesNames.sapWcrDialogSubHeaderHeight]: '2.25rem'
+  [CssSizeVariablesNames.sapWcrDialogSubHeaderHeight]: '2.25rem',
+  [CssSizeVariablesNames.sawWcrElementHeight]: ThemingParameters.sapElement_Compact_Height
 };

packages/main/src/components/FilterBar/FilterBar.jss.ts

@@ -1,4 +1,4 @@
-import { ThemingParameters } from '@ui5/webcomponents-react-base';
+import { CssSizeVariables, ThemingParameters } from '@ui5/webcomponents-react-base';
 
 const styles = {
   outerContainer: {
@@ -72,7 +72,7 @@ const styles = {
     flexBasis: 'calc(var(--_ui5wcr_filter_group_item_flex_basis))'
   },
   lastSpacer: {
-    height: 'var(--_ui5_input_height)',
+    height: CssSizeVariables.sawWcrElementHeight,
     flexGrow: 1,
     flexShrink: 0,
     maxWidth: 'calc(var(--_ui5wcr_filter_group_item_flex_basis) * 2)',