fix(AnalyticalTable): fix custom header alignment (#6068)

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx

@@ -57,7 +57,7 @@ import * as ComponentStories from './AnalyticalTable.stories';
           // set filter
           column.setFilter(event.detail.selectedOption.getAttribute('value'));
           // close popover
-          popoverRef.current.close();
+          popoverRef.current.open = false;
         };
         return (
           <Select

packages/main/src/components/AnalyticalTable/AnalyticalTable.stories.tsx

@@ -69,7 +69,7 @@ const meta = {
             // set filter
             column.setFilter(event.detail.selectedOption.getAttribute('value'));
             // close popover
-            popoverRef.current.close();
+            popoverRef.current.open = false;
           };
           return (
             <Select onChange={handleChange} style={{ width: '100%' }}>

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css

@@ -29,6 +29,14 @@
   overflow-x: hidden;
   overflow-y: hidden;
   box-sizing: border-box;
+
+  & > span {
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
 }
 
 .text {
@@ -44,6 +52,10 @@
   position: absolute;
   color: var(--sapContent_IconColor);
   inset-inline-end: 0.5rem;
+
+  & > [ui5-icon]:not(:first-child) {
+    margin-inline-start: 0.125rem;
+  }
 }
 
 .selectAllCheckBoxContainer {

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

@@ -119,7 +119,9 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
       return style;
     }
 
-    if (margin > 0) margin += 0.5;
+    if (margin > 0) {
+      margin += 0.625;
+    }
 
     style.marginInlineEnd = `${margin}rem`;
 
@@ -215,7 +217,14 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
               {children}
             </Text>
           ) : (
-            children
+            <span
+              title={tooltip}
+              style={textStyle}
+              className={classNames.text}
+              data-component-name={`AnalyticalTableHeaderContentContainer-${columnId}`}
+            >
+              {children}
+            </span>
           )}
           <div
             className={classNames.iconContainer}