ShrinkVertically/README.md

# ShrinkVertically -- keep the board horizontal scrollbar visible

A small Kanboard plugin focused on getting around the board horizontally. It fixes the
vertically-collapsed board view so the bottom scrollbar stays on screen, can optionally
add a second mirrored scrollbar above the columns, and can optionally let you drag the
board background to scroll (like Trello). Everything is configurable under
"Settings -> Shrink Vertically".

## 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:

```css
.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:

```css
#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, mirrored scrollbar just above the columns. A small script
(`Asset/js/top-scrollbar.js`, loaded only when the option is on) inserts a dummy scroll
strip above `#board-container` and keeps its scroll position in sync with the board both
ways.

## Drag to scroll on Desktop (optional)

Kanboard has no way to pan the board by grabbing it; you must use the scrollbar. Enable
"Drag the board background to scroll" to click and drag on the empty board background to
scroll the columns sideways, like the Trello board canvas. A small script
(`Asset/js/drag-scroll.js`, loaded only when the option is on) starts a horizontal pan on
`#board-container` only when the press lands on empty background -- pressing a task card,
a drag handle or any control is ignored, so Kanboard's own card and column drag-and-drop
keep working unchanged.

## 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.
- **Scrollbar thickness and column gap in pixels** -- a single value that sets both the
  thickness of the top scrollbar (Chromium/WebKit only) and the width of the column gap.
  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.
- **Widen the gap between columns** -- toggles the wider gap between board columns (sized
  by the value above). Also adds some spacing at the left and right edges of the board.
  Default: on.
- **Drag the board background to scroll horizontally** -- toggles the Trello-style
  click-and-drag panning described above. Default: on.

## License

AGPL-3.0. See LICENSE.