ShrinkVertically/Asset/css/shrink-vertically.css

/*
 * 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.
 *
 * The pixel budget is the --sv-shrink-offset CSS variable. It is injected in the
 * page head from the plugin setting (Settings -> Shrink Vertically); when unset it
 * falls back to 240px below. Increase it if the scrollbar is still clipped, or
 * decrease it to make 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 max-height can win.
 *
 * We override it to a NON-ZERO value, not 0: Kanboard relies on that same inline
 * min-height to keep EMPTY columns tall enough to be a drop target, so zeroing it makes
 * you unable to drop a card into an empty collapsed column. 250px gives a comfortable drop
 * target (well above Kanboard's 70px .draggable-placeholder) while staying below the
 * collapsed max-height, so the board never overflows the viewport (which would re-hide the
 * horizontal scrollbar). Non-empty columns are unaffected -- their content is taller -- and
 * short columns simply get this min-height, which is only cosmetic (no scrollbar).
 */
#board td .board-task-list.board-task-list-compact {
    max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
    min-height: 250px !important;
}

/*
 * Optional custom top horizontal scrollbar (built by Asset/js/top-scrollbar.js when the
 * "Add a top horizontal scrollbar" setting is enabled). It is a track + draggable thumb,
 * not a native scrollbar, so it renders and can be sized identically in every browser
 * (Chrome, Firefox, Safari) and on touch. Thickness follows the --sv-bar-size variable
 * (Settings -> Shrink Vertically), injected in the page head; falls back to 25px.
 * touch-action: none lets a finger drag the thumb without scrolling the page.
 */
.sv-top-scroll {
    position: relative;
    width: 100%;
    height: var(--sv-bar-size, 25px);
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
    touch-action: none;
}

.sv-top-scroll-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    cursor: grab;
    touch-action: none;
}

.sv-top-scroll.sv-dragging .sv-top-scroll-thumb {
    cursor: grabbing;
    background: rgba(0, 0, 0, 0.5);
}

.sv-dragging {
    user-select: none;
}