58 lines
2.0 KiB
Markdown
58 lines
2.0 KiB
Markdown
# ShrinkVertically -- keep the board horizontal scrollbar visible
|
|
|
|
A tiny Kanboard plugin that fixes the vertically-collapsed board view so the bottom
|
|
horizontal scrollbar stays on screen.
|
|
|
|
## 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 - 120px) !important;
|
|
}
|
|
```
|
|
|
|
The `120px` 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 changes nothing else: no data, no JavaScript, no database migration. The override only
|
|
applies while columns are collapsed (when core adds the `board-task-list-compact` class).
|
|
|
|
## 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.
|
|
|
|
## Tuning
|
|
|
|
Edit the single `120px` value in `Asset/css/shrink-vertically.css`. Increase it if the
|
|
scrollbar is still clipped (for example with a taller theme header); decrease it to make
|
|
the collapsed columns taller.
|
|
|
|
## License
|
|
|
|
AGPL-3.0. See LICENSE.
|