## 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 clawbot2026-02-27 11:04:54 +01:00
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
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.
Pull request closed
Please reopen this pull request to perform a merge.
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
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):
Desktop (>768px):
Testing
Closing — duplicate of #5.
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.Pull request closed