ShrinkVertically -- keep the board horizontal scrollbar visible

A small Kanboard plugin focused on the vertically-collapsed board view. It fixes the collapse so the bottom horizontal scrollbar stays on screen, and can optionally add a second mirrored scrollbar above the columns. Configurable under "Settings -> Shrink Vertically".

Board drag/touch and column-gap options that used to live here have moved to the separate TweakDrag plugin.

The problem

Kanboard's board gear menu has an "expand vertically / collapse vertically" toggle. When collapsed, each column gets a limited height so the horizontal scrollbar sits closer. Core implements this with a single rule:

.board-task-list-compact { max-height: 90vh; }

That 90vh is measured from the top of the viewport and does not account for the page header above the board. So even when collapsed, the column plus the header together exceed the viewport height and the horizontal scrollbar is pushed below the fold.

The fix

This plugin injects one CSS rule (via the template:layout:css hook) that replaces the proportional 90vh with a fixed-pixel budget for the chrome above and below the task list:

#board td .board-task-list.board-task-list-compact {
    max-height: calc(100vh - var(--sv-shrink-offset, 240px)) !important;
    min-height: 0 !important;
}

The offset reserves room for the page header, the board column header, the horizontal scrollbar, and a little breathing space. A fixed-pixel budget is more reliable than a proportional value because that chrome is a fixed height regardless of screen size. It defaults to 240px and is configurable (see Settings below).

The min-height: 0 is essential: Kanboard's drag-and-drop sets an inline min-height on each column equal to its full content height, and in CSS min-height beats max-height, so without this reset the tall columns would never shrink.

The override only applies while columns are collapsed (when core adds the board-task-list-compact class). It changes no data and runs no database migration.

Menu labels

So it is obvious the collapsed behaviour comes from this plugin and not from core, a small script (via template:layout:js) appends a + to the two gear-menu items, so they read "Collapse vertically+" and "Expand vertically+". It only edits the rendered link text, so it works in any locale.

Requirements

• Kanboard >= 1.2.0

Installation

Copy this folder into your Kanboard installation as plugins/ShrinkVertically/. The directory name must be exactly ShrinkVertically (Kanboard derives the plugin namespace from the folder name). Reload the board; no build step, no configuration.

Top horizontal scrollbar (optional)

Kanboard's board scrolls horizontally inside #board-container, so its only horizontal scrollbar is at the very bottom of the board -- on a wide board you must scroll all the way down to move sideways. Enable "Add a top horizontal scrollbar" in the settings to get a second scrollbar just above the columns.

It is a custom track + draggable thumb (Asset/js/top-scrollbar.js, loaded only when the option is on), not a native scrollbar, so it renders and can be sized the same in every browser (Chrome, Firefox, Safari) and on touch. Drag the thumb or click the track to move the board; the thumb tracks the board when you scroll it by other means. Its thickness follows the "Top Horizontal Scrollbar thickness" setting.

Settings

These settings are global (per Kanboard instance) and admin-only. Go to "Settings -> Shrink Vertically":

• Vertical offset in pixels -- pixels reserved around the collapsed columns. Injected in the page head as the --sv-shrink-offset CSS variable. Increase it if the scrollbar is still clipped (for example with a taller theme header); decrease it to make the collapsed columns taller. Default: 240.
• Auto adjust -- instead of a fixed offset, measure the collapsed board live and size the columns to fit the screen automatically, so the right-side vertical scrollbar is not needed. It re-measures on window resize, on collapse/expand, and after a board refresh. While enabled, the pixel-offset field above is disabled and dimmed (the measured value is used instead). Loaded as Asset/js/auto-adjust.js only when the option is on. Default: off.
• Top Horizontal Scrollbar thickness in pixels -- thickness of the custom top scrollbar (all browsers). Injected as the --sv-bar-size CSS variable. Default: 25.
• Add a top horizontal scrollbar to the board -- toggles the mirrored top scrollbar described above. Default: on.

License

AGPL-3.0. See LICENSE.

More Kanboard plugins by Dr. Beco

All free and AGPL-3.0, at code.beco.cc:

• RecoReco -- calendar-scheduled recurring cards (yearly, monthly, weekly, daily), driven by the card due date.
• FinanceBuddy -- attach a money value (debit/credit and installments) to cards, shown on the card and totalled per column.
• QualKard -- flashcard spaced repetition: grade a card by dragging it to a column, and it comes back when due (needs RecoReco).
• WorkspaceOrg -- group your projects into personal per-user workspaces, shown on a "My workspaces" dashboard page with a badge on each project.
• OrganonTweaks -- an umbrella of small quality-of-life board tweaks: remove an empty column, always show the comment icon, emphasize due dates, extra search keywords and shared board filters, and more.
• BulkMoveTasks -- move every task from one board column to another in a single action.
• TweakDrag -- board drag and touch niceties: drag-to-scroll, a wider column gap, and smoother card dragging.