chore<Table>: Header layout

src/components/Table/__tests__/Table.visual.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {test} from '~playwright/core';
+
+import {TableStories} from './helpersPlaywright';
+
+test.describe('Table', () => {
+    test('render story: <Default>', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.Default />);
+
+        await expectScreenshot();
+    });
+
+    test('render story: <HOCWithTableSorting>', async ({mount, expectScreenshot}) => {
+        await mount(<TableStories.HOCWithTableSorting />);
+
+        await expectScreenshot();
+    });
+});

src/components/Table/__tests__/helpersPlaywright.tsx

@@ -0,0 +1,5 @@
+import {composeStories} from '@storybook/react';
+
+import * as DefaultTableStories from '../__stories__/Table.stories';
+
+export const TableStories = composeStories(DefaultTableStories);

src/components/Table/hoc/withTableSorting/SortIndicator/SortIndicator.scss

@@ -3,6 +3,8 @@
 $block: '.#{variables.$ns}sort-indicator';
 
 #{$block} {
+    display: flex;
+
     &__icon {
         vertical-align: -2px;
     }

src/components/Table/hoc/withTableSorting/withTableSorting.scss

@@ -5,7 +5,7 @@ $block: '.#{variables.$ns}table';
 #{$block} {
     &__sort {
         display: inline-flex;
-        align-items: baseline;
+        align-items: center;
         gap: var(--g-spacing-1);
         // `top` to avoid redundant height to appear
         vertical-align: top;