fix(AnalyticalTable): center align indicator icons of columns (#4572)

Author: Lukas742

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -82,9 +82,10 @@ const styles = {
     textAlign: 'start'
   },
   iconContainer: {
-    display: 'inline-block',
+    display: 'flex',
     position: 'absolute',
-    color: ThemingParameters.sapContent_IconColor
+    color: ThemingParameters.sapContent_IconColor,
+    insetInlineEnd: '0.5rem'
   },
   selectAllCheckBoxContainer: {
     display: 'flex',
@@ -158,11 +159,7 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
 
     if (margin > 0) margin += 0.5;
 
-    if (isRtl) {
-      style.marginLeft = `${margin}rem`;
-    } else {
-      style.marginRight = `${margin}rem`;
-    }
+    style.marginInlineEnd = `${margin}rem`;
 
     return style;
   })();
@@ -180,8 +177,6 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
     ? { right: 0, transform: `translateX(-${virtualColumn.start}px)` }
     : { left: 0, transform: `translateX(${virtualColumn.start}px)` };
 
-  const iconContainerDirectionStyles = isRtl ? { left: '0.5rem' } : { right: '0.5rem' };
-
   const handleHeaderCellKeyDown = (e) => {
     onKeyDown?.(e);
     if (hasPopover && e.code === 'Enter') {
@@ -261,7 +256,6 @@ export const ColumnHeader: FC<ColumnHeaderProps> = (props: ColumnHeaderProps) =>
           </Text>
           <div
             className={classes.iconContainer}
-            style={iconContainerDirectionStyles}
             data-component-name={`AnalyticalTableHeaderIconsContainer-${columnId}`}
           >
             {isFiltered && <Icon name={iconFilter} aria-hidden />}