remove calculated width from group row

- prevents overflow when pinned right columns
This commit is contained in:
jeffvli
2025-11-22 00:50:32 -08:00
parent 606aaa0d56
commit e137e727f6
2 changed files with 0 additions and 74 deletions
@@ -324,21 +324,6 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
// If rendering in main grid, extend left to cover pinned columns
const pinnedLeftWidth =
props.pinnedLeftColumnWidths?.reduce((sum, width) => sum + width, 0) || 0;
const pinnedRightWidth =
props.pinnedRightColumnWidths?.reduce((sum, width) => sum + width, 0) || 0;
// Use calculated column widths if available (they include all columns in order)
// Otherwise fall back to summing column config widths
const totalTableWidth = props.calculatedColumnWidths
? props.calculatedColumnWidths.reduce((sum, width) => sum + width, 0)
: pinnedLeftWidth +
props.columns
.slice(
props.pinnedLeftColumnCount || 0,
props.columns.length - (props.pinnedRightColumnCount || 0),
)
.reduce((sum, col) => sum + col.width, 0) +
pinnedRightWidth;
// Determine if we're rendering in the first pinned left column
const isFirstPinnedLeftColumn =
@@ -364,7 +349,6 @@ export const ItemTableListColumn = (props: ItemTableListColumn) => {
style={{
...props.style,
marginLeft: pinnedLeftWidth > 0 ? `-${pinnedLeftWidth}px` : 0,
width: `${totalTableWidth}px`,
}}
>
{groupHeader}
@@ -1,58 +0,0 @@
import { useInView } from 'motion/react';
import { useEffect, useRef } from 'react';
import { useWindowSettings } from '/@/renderer/store/settings.store';
import { Platform } from '/@/shared/types/types';
export const useFixedTableHeader = ({ enabled }: { enabled: boolean }) => {
const tableHeaderRef = useRef<HTMLDivElement | null>(null);
const tableContainerRef = useRef<HTMLDivElement | null>(null);
const { windowBarStyle } = useWindowSettings();
const topMargin =
windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS
? '-130px'
: '-100px';
const isTableHeaderInView = useInView(tableHeaderRef, {
margin: `${topMargin} 0px 0px 0px`,
});
const isTableInView = useInView(tableContainerRef, {
margin: `${topMargin} 0px 0px 0px`,
});
useEffect(() => {
if (!enabled) {
return;
}
const header = document.querySelector('main .ag-header');
const root = document.querySelector('main .ag-root');
if (!isTableHeaderInView && isTableInView) {
header?.classList.add('ag-header-fixed');
root?.classList.add('ag-header-fixed-margin');
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.add('ag-header-window-bar');
}
} else if (!isTableInView) {
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('ag-header-window-bar');
}
} else if (isTableHeaderInView) {
header?.classList.remove('ag-header-fixed');
root?.classList.remove('ag-header-fixed-margin');
if (windowBarStyle === Platform.WINDOWS || windowBarStyle === Platform.MACOS) {
header?.classList.remove('ag-header-window-bar');
}
}
}, [enabled, isTableHeaderInView, isTableInView, windowBarStyle]);
return { tableContainerRef, tableHeaderRef };
};