Skip to content

Responsive layout: side panel (~1/3 width) on wide screens instead of bottom sheet #24

Description

@DocGerd

User feedback (2026-07-16, from live MVP use): the current layout splits the viewport half map / half input with the panel below. On wide screens the panel (Planen/Routen/Live) should instead sit as a side panel of roughly 1/3 viewport width (left or right), with the map taking the remaining ~2/3 full-height — the current arrangement wastes vertical map space and stretches form controls to absurd widths (see the full-width text inputs and the centered lone checkbox in the screenshot).

Sketch

  • Breakpoint (e.g. ≥ ~900–1024 px): CSS grid grid-template-columns: minmax(320px, 1fr) 2fr (panel left) or mirrored — pick one and keep it stable; map fills the rest at full height.
  • Below the breakpoint: keep the existing bottom-sheet layout (phone/cockpit portrait use is the primary on-boat mode).
  • Form controls in the side panel get a sane max-width; the options fields should not span the full panel either.
  • Map resize: MapLibre needs map.resize() on layout change (breakpoint crossing) — otherwise stale canvas size.
  • Banner area placement should remain visible in both layouts.

Candidate scheduling: fold into Phase F polish (F3) if cheap, else post-F.

🤖 Generated with Claude Code

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions