chore: update table header icon

Author: tewarig

packages/blade/src/components/Table/TableHeader.web.tsx

@@ -124,6 +124,14 @@ const StyledHeaderCell = styled(HeaderCell)<{
         ? makeSpace(getIn(theme, tableRow.paddingRight[$rowDensity]))
         : undefined,
       minHeight: makeSize(getIn(size, tableRow.minHeight[$rowDensity])),
+      '> .text': {
+        flexGrow: 1,
+        display: 'flex',
+        justifyContent: $textAlign,
+      },
+      '> .sortIcon': {
+        flexShrink: 0,
+      },
     },
     '&:focus-visible': getFocusRingStyles({ theme, negativeOffset: true }),
   },
@@ -162,20 +170,24 @@ const _TableHeaderCell = ({
       {...metaAttribute({ name: MetaConstants.TableHeaderCell })}
       {...makeAnalyticsAttribute(rest)}
     >
-      {isChildrenString ? (
-        <Text size="medium" weight="medium" color="surface.text.gray.normal">
-          {children}
-        </Text>
-      ) : (
-        children
-      )}
+      <div className="text">
+        {isChildrenString ? (
+          <Text size="medium" weight="medium" color="surface.text.gray.normal">
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </div>
       {isSortable && (
-        <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
-          <SortIcon
-            isSorted={currentSortedState.sortKey === headerKey}
-            isSortReversed={currentSortedState.isSortReversed}
-          />
-        </BaseBox>
+        <div className="sortIcon">
+          <BaseBox paddingLeft="spacing.2" backgroundColor="transparent">
+            <SortIcon
+              isSorted={currentSortedState.sortKey === headerKey}
+              isSortReversed={currentSortedState.isSortReversed}
+            />
+          </BaseBox>
+        </div>
       )}
     </StyledHeaderCell>
   );