Responsive grid breakpoints for small screens #41

New Issue

2026-07-28T19:47:51Z

claude-bot commented

2026-07-28 19:47:51 +00:00

Problem

The grid column count is fixed:

options.put("column", 12);
options.put("cellHeight", "120px");

On a phone, a 6-column-wide widget occupies half a ~380px viewport — charts become unreadable and unusable. The dashboard is desktop-only by accident, not by decision.

Proposal

Use gridstack's responsive support:

Configure columnOpts with breakpoints so the grid collapses to fewer columns (ultimately 1) below a width threshold.
Consider cellHeight adjustment at small widths — 120px rows stack into a very long page otherwise.
Decide and document what happens to drag/resize on touch: either keep it, or set staticGrid below a breakpoint. Editing a layout on a phone is rarely worth the misfires, and a static mobile view is a legitimate choice.

Important interaction with persistence: gridstack's one-column mode remembers the multi-column layout and restores it when the viewport grows back. That must not be persisted (#22) as if the user had rearranged everything — otherwise resizing a browser window silently destroys the desktop layout. Verify what save() returns while collapsed before wiring it to the store.

Acceptance criteria

At mobile width, widgets are full-width and charts remain legible.
Returning to desktop width restores the original layout.
Collapsing does not overwrite the persisted desktop layout.
Playwright e2e at two viewport sizes.

Depends on

Should land after or together with #22 — the persistence interaction above is the actual risk here, not the CSS.

Scope

Small in code, needs care in testing.

## Problem The grid column count is fixed: ```java options.put("column", 12); options.put("cellHeight", "120px"); ``` On a phone, a 6-column-wide widget occupies half a ~380px viewport — charts become unreadable and unusable. The dashboard is desktop-only by accident, not by decision. ## Proposal Use gridstack's responsive support: - Configure `columnOpts` with breakpoints so the grid collapses to fewer columns (ultimately 1) below a width threshold. - Consider `cellHeight` adjustment at small widths — 120px rows stack into a very long page otherwise. - Decide and document what happens to drag/resize on touch: either keep it, or set `staticGrid` below a breakpoint. Editing a layout on a phone is rarely worth the misfires, and a static mobile view is a legitimate choice. Important interaction with persistence: gridstack's one-column mode remembers the multi-column layout and restores it when the viewport grows back. That must not be persisted (#22) as if the user had rearranged everything — otherwise resizing a browser window silently destroys the desktop layout. Verify what `save()` returns while collapsed before wiring it to the store. ## Acceptance criteria - At mobile width, widgets are full-width and charts remain legible. - Returning to desktop width restores the original layout. - Collapsing does not overwrite the persisted desktop layout. - Playwright e2e at two viewport sizes. ## Depends on Should land after or together with #22 — the persistence interaction above is the actual risk here, not the CSS. ## Scope Small in code, needs care in testing.

claude-bot added the enhancement label 2026-07-28 19:47:51 +00:00

pitfriedrich added the ai-ready label 2026-07-29 05:00:57 +00:00

claude-bot added ai-wip and removed ai-ready labels 2026-07-29 05:40:26 +00:00

claude-bot referenced this issue from a commit

2026-07-29 05:52:42 +00:00

fix: responsive grid breakpoints for small screens (#41)

claude-bot referenced a pull request that will close this issue

2026-07-29 05:52:52 +00:00

fix: responsive grid breakpoints for small screens (#41) #50

claude-bot commented

2026-07-29 05:56:29 +00:00