/* * ShrinkVertically -- keep the board's horizontal scrollbar visible when columns * are vertically collapsed (gear menu "collapse vertically" / shortcut, which sets * localStorage vertical_scroll=0 and adds the class .board-task-list-compact). * * Kanboard core sets: .board-task-list-compact { max-height: 90vh; } * That 90vh is measured from the top of the viewport and ignores the page header * above the board, so column + header together exceed the viewport and push the * horizontal scrollbar below the fold. * * We instead reserve a fixed pixel budget for the chrome above and below the task * list (page header + board column header + the horizontal scrollbar + a little * breathing room). A fixed-px budget is more reliable than a proportional vh value * because that chrome is a fixed height regardless of screen size. * * Tune the single number below (240px) if the scrollbar is still clipped or if you * want the columns taller. * * The selector is intentionally more specific than core's single-class rule, and * uses !important, so this override wins even alongside a theme (e.g. Essential). * * The min-height override is essential: Kanboard's drag-and-drop sets an INLINE * min-height on each column equal to its full content height * (BoardDragAndDrop.js: css("min-height", parent().height())). In CSS, min-height * beats max-height, so that inline value keeps tall columns from shrinking and our * max-height alone does nothing. A stylesheet !important overrides the inline * (non-important) min-height, so we reset it to 0 and let max-height win. */ #board td .board-task-list.board-task-list-compact { max-height: calc(100vh - 240px) !important; min-height: 0 !important; }