fix(tasks): Kanban columns get their full height right after stretching the board

The one-row overflow correction was measured before the new height was
on the page, so the two tall rows from before counted as overflow and
squeezed the columns to their minimum until the window was resized. It
now runs after the new height is committed (layout effect), and the board
measures again when its width animation ends.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
sandrodachandClaude Opus 5.5 committed 2026-11-02 21:21:58 +01:00
1 parent 20e662a1e1
commit 85f19fc447
1 file changed
+22 -6
+22 -6
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState, useRef, useMemo, useCallback } from 'react';
import React, { useEffect, useLayoutEffect, useState, useRef, useMemo, useCallback } from 'react';
import { AnimatePresence, motion } from 'framer-motion';
import {
Check,
@@ -605,17 +605,33 @@ export const TasksView: React.FC<TasksViewProps> = ({
const multi = tops.size > 1;
setKanbanMultiRow(multi);
setKanbanPerRow(colTops.filter((t) => t === Math.min(...colTops)).length);
if (multi) return;
// One row: take back what still overflows (paddings), so the page does not scroll
const over = area ? area.scrollHeight - area.clientHeight : document.documentElement.scrollHeight - window.innerHeight;
if (over > 0) setKanbanColHeight((h) => (h ? Math.max(KANBAN_MIN_COL_HEIGHT, h - over) : h));
});
};
fit();
// The board's width animates when it is stretched to full width or back: measure again at the end
const board = kanbanBoardRef.current;
const onTransitionEnd = (e: TransitionEvent) => {
if (e.target === board) fit();
};
window.addEventListener('resize', fit);
return () => window.removeEventListener('resize', fit);
board?.addEventListener('transitionend', onTransitionEnd);
return () => {
window.removeEventListener('resize', fit);
board?.removeEventListener('transitionend', onTransitionEnd);
};
}, [isKanban, isKanbanWide, boardColumns.length, selectedListId, loading]);
// One row on the desktop: take back what still overflows (paddings), so the page does not scroll. Measured
// only once the new height is on the page; measured right away, the old layout (e.g. two tall rows before
// stretching the board to full width) counted as overflow and squeezed the columns to their minimum.
useLayoutEffect(() => {
if (!kanbanColHeight || kanbanMultiRow || kanbanPhoneSnap) return;
const area = kanbanBoardRef.current?.closest<HTMLElement>('[data-app-scroll]');
if (!area) return;
const over = area.scrollHeight - area.clientHeight;
if (over > 0) setKanbanColHeight((h) => (h ? Math.max(KANBAN_MIN_COL_HEIGHT, h - over) : h));
}, [kanbanColHeight, kanbanMultiRow, kanbanPhoneSnap]);
// Several rows: one wheel step moves to the next row (or back up to the previous row / the page top),
// smoothly. The browser's own snapping goes back to the nearest point, so a wheel step shorter than a row
// never got past the first one. A column whose cards can still scroll that way scrolls first; Ctrl +