feat: responsive mobile layout — full redesign for portrait viewports #7

clawbot · 2026-02-27T11:04:54+01:00

clawbot commented

2026-02-27 11:04:54 +01:00

Summary

Replaces the mobile-block approach with a fully working responsive mobile layout for the NetWatch monitoring dashboard.

Closes #2

Changes

All changes are CSS-only in src/styles.css, scoped inside @media (max-width: 768px) — the desktop layout is completely untouched.

Mobile layout (≤768px):

Host rows stack vertically: host info (name, latency, status) on top, sparkline chart full-width below
Summary stats line: wraps into a multi-line flex layout with pipe separators hidden
Header: title and controls stack vertically for narrow screens
Pause button: sized for touch targets
Pin button: repositioned to top-right corner of each host row
Footer: legend wraps cleanly

Desktop (>768px):

Zero changes — pixel-identical to current production

Testing

$ make check
✓ yarn build (success)
✓ prettier --check (all files pass)
$ docker build .
✓ builds successfully

## Summary Replaces the mobile-block approach with a fully working responsive mobile layout for the NetWatch monitoring dashboard. Closes #2 ## Changes All changes are CSS-only in `src/styles.css`, scoped inside `@media (max-width: 768px)` — the desktop layout is completely untouched. ### Mobile layout (≤768px): - **Host rows stack vertically**: host info (name, latency, status) on top, sparkline chart full-width below - **Summary stats line**: wraps into a multi-line flex layout with pipe separators hidden - **Header**: title and controls stack vertically for narrow screens - **Pause button**: sized for touch targets - **Pin button**: repositioned to top-right corner of each host row - **Footer**: legend wraps cleanly ### Desktop (>768px): - **Zero changes** — pixel-identical to current production ## Testing ``` $ make check ✓ yarn build (success) ✓ prettier --check (all files pass) $ docker build . ✓ builds successfully ```

sneak was assigned by clawbot

2026-02-27 11:04:54 +01:00

clawbot added 1 commit 2026-02-27 11:04:54 +01:00

feat: responsive mobile layout for monitoring dashboard

check / check (push) Successful in 31s

Details

b6edfb2857

Redesign the UI to work on mobile/portrait viewports using CSS media
queries at max-width 768px:

- Host rows stack vertically: info (name, latency, status) on top,
  sparkline chart full-width below
- Summary stats line wraps properly with hidden pipe separators
- Header stacks title and controls vertically
- Pause button and controls sized appropriately for touch
- Pin button repositioned for mobile touch targets
- Footer legend wraps cleanly

Desktop layout remains pixel-identical — all changes are scoped to the
@media (max-width: 768px) query in styles.css only.

Refs #2

clawbot commented

2026-02-27 11:05:06 +01:00

Closing — duplicate of #5.

clawbot closed this pull request

2026-02-27 11:05:07 +01:00

clawbot commented

2026-02-27 11:05:37 +01:00

Note: this PR is based on main before PR #6 (mobile block) merges. Once #6 is merged, I'll rebase this and remove the early-return mobile block code from init() in main.js, since this PR makes mobile actually work.

Note: this PR is based on main before PR #6 (mobile block) merges. Once #6 is merged, I'll rebase this and remove the early-return mobile block code from `init()` in main.js, since this PR makes mobile actually work.

check / check (push) Successful in 31s

Required

Details

Pull request closed

Please reopen this pull request to perform a merge.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sneak/netwatch#7