fix(web): stabilize split table column sizing

- derive default colgroup widths from visible columns when split headers or header sizing are enabled.
- apply a fixed table layout with computed minimum width so header and body columns stay aligned.
- keep split-header containers from leaking horizontal overflow and avoid extra pinned-column borders.

web/default/src/components/data-table/core/column-pinning.ts

@@ -47,8 +47,8 @@ function getPinnedColumnClassName(
 ) {
   const edgeClassName =
     pinnedColumn.side === 'left'
-      ? 'border-r shadow-[8px_0_10px_-10px_hsl(var(--foreground))]'
-      : 'border-l shadow-[-8px_0_10px_-10px_hsl(var(--foreground))]'
+      ? 'shadow-[8px_0_10px_-10px_hsl(var(--foreground))]'
+      : 'shadow-[-8px_0_10px_-10px_hsl(var(--foreground))]'
 
   return cn(
     'sticky whitespace-nowrap',

web/default/src/components/data-table/core/data-table-colgroup.tsx

@@ -0,0 +1,33 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type { Table as TanstackTable } from '@tanstack/react-table'
+
+export function DataTableColgroup<TData>({
+  table,
+}: {
+  table: TanstackTable<TData>
+}) {
+  return (
+    <colgroup>
+      {table.getVisibleLeafColumns().map((column) => (
+        <col key={column.id} style={{ width: column.getSize() }} />
+      ))}
+    </colgroup>
+  )
+}

web/default/src/components/data-table/core/data-table-view.tsx

@@ -21,9 +21,11 @@ import { type Row } from '@tanstack/react-table'
 import { cn } from '@/lib/utils'
 import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
 import { getResolvedColumnClassName } from './column-pinning'
+import { DataTableColgroup } from './data-table-colgroup'
 import { DataTableHeader } from './data-table-header'
 import { DataTableRow } from './data-table-row'
 import { TableEmpty } from './table-empty'
+import { getTableSizeStyle } from './table-sizing'
 import { TableSkeleton } from './table-skeleton'
 import type { DataTableColumnClassName, DataTableViewProps } from './types'
 
@@ -69,11 +71,12 @@ function UnifiedTableView<TData>({
     props.getColumnClassName,
     props.pinnedColumns
   )
+  const tableSizing = getTableSizing(props)
 
   return (
     <div className={props.tableContainerClassName}>
-      <Table className={props.tableClassName}>
-        {props.colgroup}
+      <Table className={props.tableClassName} style={tableSizing.style}>
+        {tableSizing.colgroup}
         <DataTableHeader
           table={props.table}
           applyHeaderSize={props.applyHeaderSize}
@@ -102,6 +105,7 @@ function SplitHeaderTableView<TData>({
     props.getColumnClassName,
     props.pinnedColumns
   )
+  const tableSizing = getTableSizing(props)
 
   React.useEffect(() => {
     const headerScroller = headerHostRef.current?.querySelector<HTMLElement>(
@@ -140,10 +144,10 @@ function SplitHeaderTableView<TData>({
       >
         <div
           ref={headerHostRef}
-          className='[scrollbar-gutter:stable] overflow-hidden'
+          className='[scrollbar-gutter:stable] overflow-hidden [&_[data-slot=table-container]]:overflow-x-hidden'
         >
-          <Table className={props.tableClassName}>
-            {props.colgroup}
+          <Table className={props.tableClassName} style={tableSizing.style}>
+            {tableSizing.colgroup}
             <DataTableHeader
               table={props.table}
               applyHeaderSize={props.applyHeaderSize}
@@ -156,12 +160,12 @@ function SplitHeaderTableView<TData>({
         <div
           ref={bodyHostRef}
           className={cn(
-            'min-h-0 flex-1 overflow-y-auto',
+            'min-h-0 flex-1 [scrollbar-gutter:stable] overflow-y-auto',
             props.bodyContainerClassName
           )}
         >
-          <Table className={props.tableClassName}>
-            {props.colgroup}
+          <Table className={props.tableClassName} style={tableSizing.style}>
+            {tableSizing.colgroup}
             {renderTableBody(props, rows, colSpan, getColumnClassName)}
           </Table>
         </div>
@@ -170,6 +174,24 @@ function SplitHeaderTableView<TData>({
   )
 }
 
+function getTableSizing<TData>(props: DataTableViewProps<TData>): {
+  colgroup?: React.ReactNode
+  style?: React.CSSProperties
+} {
+  if (props.colgroup) {
+    return { colgroup: props.colgroup }
+  }
+
+  if (!props.splitHeader && !props.applyHeaderSize) {
+    return {}
+  }
+
+  return {
+    colgroup: <DataTableColgroup table={props.table} />,
+    style: getTableSizeStyle(props.table),
+  }
+}
+
 function renderTableBody<TData>(
   props: DataTableViewProps<TData>,
   rows: Row<TData>[],

web/default/src/components/data-table/core/table-sizing.ts

@@ -0,0 +1,30 @@
+/*
+Copyright (C) 2023-2026 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+import type * as React from 'react'
+import type { Table as TanstackTable } from '@tanstack/react-table'
+
+export function getTableSizeStyle<TData>(
+  table: TanstackTable<TData>
+): React.CSSProperties {
+  const width = table
+    .getVisibleLeafColumns()
+    .reduce((total, column) => total + column.getSize(), 0)
+
+  return { minWidth: width, tableLayout: 'fixed', width: '100%' }
+}