dbeaver/pro#6520 fix: header cell layout (#3759)

* dbeaver/pro#6520 fix: header cell layout

* dbeaver/pro#6520 refactor: table cell always shows 2 rows

* dbeaver/pro#6520 fix: use two rows grid only if a table has any description

---------

Co-authored-by: sergeyteleshev <iamsergeyteleshev@gmail.com>
Co-authored-by: Daria Marutkina <125263541+dariamarutkina@users.noreply.github.com>

webapp/common-react/@dbeaver/react-data-grid/src/renderers/HeaderCellContentRenderer.tsx

@@ -1,3 +1,11 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+
 import { memo, use } from 'react';
 import { useDrag, useDrop, type DnDStoreProvider } from '@dbeaver/react-dnd';
 import { DataGridCellHeaderContext } from '../DataGridHeaderCellContext.js';
@@ -72,13 +80,13 @@ export const HeaderCellContentRenderer = memo(function HeaderCellContentRenderer
 
   return (
     <div
-      onKeyDown={onKeyDown}
       tabIndex={tabIndex}
       className="tw:w-full tw:h-full tw:content-center tw:flex tw:items-center tw:justify-between tw:gap-1 tw:outline-none tw:group"
       {...drag.props}
       {...drop.props}
+      onKeyDown={onKeyDown}
     >
-      <span className="tw:overflow-hidden tw:h-full tw:text-ellipsis">{headerElement ?? getHeaderText ?? ''}</span>
+      <span className="tw:overflow-hidden tw:text-ellipsis">{headerElement ?? getHeaderText ?? ''}</span>
       {isColumnSortable && onColumnSort && <OrderButton sortState={sortingState} onClick={handleSort} />}
     </div>
   );

webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/TableColumnHeader/TableColumnHeader.tsx

@@ -7,6 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 import { useContext } from 'react';
+import { clsx } from '@dbeaver/ui-kit';
 
 import { getComputed, s, StaticImage, useS } from '@cloudbeaver/core-blocks';
 
@@ -15,7 +16,6 @@ import { DataGridSelectionContext } from '../DataGridSelection/DataGridSelection
 import { TableDataContext } from '../TableDataContext.js';
 import style from './TableColumnHeader.module.css';
 import { useTableColumnDnD } from './useTableColumnDnD.js';
-import { HEADER_HEIGHT } from '../DataGridTable.js';
 
 interface Props {
   colIdx: number;
@@ -80,11 +80,13 @@ export const TableColumnHeader = observer<Props>(function TableColumnHeader({ co
         {dataReadonly && colIdx === 0 && (
           <div className={s(styles, { readonlyStatus: true, independent: true }, 'rdg-table-header__readonly-status')} />
         )}
-        <div className="tw:grid tw:grid-cols-[auto_1fr] tw:grid-rows-[auto_auto] tw:h-full tw:w-full">
-          <div
-            style={{ height: !tableDataContext.hasDescription ? HEADER_HEIGHT : 'auto' }}
-            className="tw:gap-1 tw:col-start-1 tw:col-end-2 tw:row-start-1 tw:row-end-2 tw:flex tw:items-center tw:justify-center tw:truncate"
-          >
+        <div
+          className={clsx(
+            'tw:grid tw:grid-cols-[auto_1fr] tw:h-full tw:w-full',
+            tableDataContext.hasDescription ? 'tw:grid-rows-2' : 'tw:grid-rows-1',
+          )}
+        >
+          <div className="tw:gap-1 tw:col-start-1 tw:col-end-2 tw:row-start-1 tw:row-end-2 tw:flex tw:items-center tw:justify-center tw:truncate">
             {icon && (
               <div className={s(styles, { icon: true })}>
                 <StaticImage icon={icon} className={s(styles, { staticImage: true })} />