fix: better paddings

Author: astandrik

src/components/QueryResultTable/utils/getColumnWidth.test.ts

@@ -1,21 +1,26 @@
-import {MAX_COLUMN_WIDTH, getColumnWidth} from './getColumnWidth';
+import {
+    MAX_COLUMN_WIDTH,
+    PADDING_NO_SORT_ICON,
+    PADDING_WITH_SORT_ICON,
+    getColumnWidth,
+} from './getColumnWidth';
 
 describe('getColumnWidth', () => {
     it('returns minimum width for empty data', () => {
         const result = getColumnWidth({data: [], name: 'test', columnType: 'string'});
-        expect(result).toBe(20 + 'test'.length * 10);
+        expect(result).toBe(PADDING_NO_SORT_ICON + 'test'.length * 10);
     });
 
     it('calculates correct width for string columns', () => {
         const data = [{test: 'short'}, {test: 'medium length'}, {test: 'this is a longer string'}];
         const result = getColumnWidth({data, name: 'test', columnType: 'string'});
-        expect(result).toBe(20 + 'this is a longer string'.length * 10);
+        expect(result).toBe(PADDING_NO_SORT_ICON + 'this is a longer string'.length * 10);
     });
 
     it('calculates correct width for number columns', () => {
         const data = [{test: 123}, {test: 456789}, {test: 0}];
         const result = getColumnWidth({data, name: 'test', columnType: 'number'});
-        expect(result).toBe(40 + '456789'.length * 10);
+        expect(result).toBe(PADDING_WITH_SORT_ICON + '456789'.length * 10);
     });
 
     it('returns MAX_COLUMN_WIDTH when calculated width exceeds it', () => {
@@ -26,18 +31,18 @@ describe('getColumnWidth', () => {
 
     it('handles undefined data correctly', () => {
         const result = getColumnWidth({name: 'test', columnType: 'string'});
-        expect(result).toBe(20 + 'test'.length * 10);
+        expect(result).toBe(PADDING_NO_SORT_ICON + 'test'.length * 10);
     });
 
     it('handles missing values in data correctly', () => {
         const data = [{test: 'short'}, {}, {test: 'longer string'}];
         const result = getColumnWidth({data, name: 'test', columnType: 'string'});
-        expect(result).toBe(20 + 'longer string'.length * 10);
+        expect(result).toBe(PADDING_NO_SORT_ICON + 'longer string'.length * 10);
     });
 
     it('uses column name length when all values are shorter', () => {
         const data = [{longColumnName: 'a'}, {longColumnName: 'bb'}];
         const result = getColumnWidth({data, name: 'longColumnName', columnType: 'string'});
-        expect(result).toBe(20 + 'longColumnName'.length * 10);
+        expect(result).toBe(PADDING_NO_SORT_ICON + 'longColumnName'.length * 10);
     });
 });

src/components/QueryResultTable/utils/getColumnWidth.ts

@@ -1,6 +1,8 @@
 import type {KeyValueRow} from '../../../types/api/query';
 
 export const MAX_COLUMN_WIDTH = 600;
+export const PADDING_WITH_SORT_ICON = 55;
+export const PADDING_NO_SORT_ICON = 35;
 
 export const getColumnWidth = ({
     data,
@@ -12,7 +14,7 @@ export const getColumnWidth = ({
     columnType?: string;
 }) => {
     let maxColumnContentLength = name.length;
-    const headerPadding = columnType === 'number' ? 40 : 20;
+    const headerPadding = columnType === 'number' ? PADDING_WITH_SORT_ICON : PADDING_NO_SORT_ICON;
 
     if (data) {
         for (const row of data) {