Redesigns host rows for portrait/mobile viewports (<=768px):
- Host info panel stacks on top, full width
- Sparkline renders full width below
- Each host row becomes taller to accommodate vertical layout
- Summary line wraps gracefully
- Header controls stack below title
Desktop layout is unchanged — all changes are inside a `@media (max-width: 768px)` query and CSS class hooks added to the HTML.
Closes #2
sneak
was assigned by clawbot2026-02-27 11:01:23 +01:00
Redesign host rows for portrait/mobile viewports (<=768px):
- Host info panel stacks on top, full width
- Sparkline renders full width below
- Each host row becomes taller to accommodate vertical layout
- Summary line wraps gracefully
- Header controls stack below title
Desktop layout is unchanged — all changes are inside a media query.
Rebased on main (after PR #3 mobile block merge). Added a commit that removes the mobile-block placeholder code since this PR makes mobile actually work via CSS media queries.
Docker build verified ✅. Ready for review.
Rebased on main (after PR #3 mobile block merge). Added a commit that removes the mobile-block placeholder code since this PR makes mobile actually work via CSS media queries.
Docker build verified ✅. Ready for review.
Added ~90 lines of @media (max-width: 768px) CSS for responsive layout
Host rows stack vertically, sparklines go full-width, header controls wrap
Minor note: CSS selectors are tightly coupled to Tailwind class names (e.g. .w-\[420px\]). If those classes change in main.js, the responsive rules will silently stop matching. Manageable since both live in the same repo, but worth knowing.
Desktop layout is untouched. No test/linter/config changes. Marking merge-ready.
## Review: ✅ PASS
Clean implementation. Removes the fragile UA-sniffing mobile block in favor of proper CSS media queries — correct approach.
**What changed:**
- Removed `isMobile()` / `buildMobileUI()` JS placeholder
- Added ~90 lines of `@media (max-width: 768px)` CSS for responsive layout
- Host rows stack vertically, sparklines go full-width, header controls wrap
**Minor note:** CSS selectors are tightly coupled to Tailwind class names (e.g. `.w-\[420px\]`). If those classes change in `main.js`, the responsive rules will silently stop matching. Manageable since both live in the same repo, but worth knowing.
Desktop layout is untouched. No test/linter/config changes. Marking `merge-ready`.
sneak
merged commit 1fb3ff2954 into main2026-03-10 19:56:41 +01:00
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.
Redesigns host rows for portrait/mobile viewports (<=768px):
Desktop layout is unchanged — all changes are inside a
@media (max-width: 768px)query and CSS class hooks added to the HTML.Closes #2
afb8bfe10eto0a633258a80a633258a8to86ba1b5b51Rebased on main (after PR #3 mobile block merge). Added a commit that removes the mobile-block placeholder code since this PR makes mobile actually work via CSS media queries.
Docker build verified ✅. Ready for review.
Review: ✅ PASS
Clean implementation. Removes the fragile UA-sniffing mobile block in favor of proper CSS media queries — correct approach.
What changed:
isMobile()/buildMobileUI()JS placeholder@media (max-width: 768px)CSS for responsive layoutMinor note: CSS selectors are tightly coupled to Tailwind class names (e.g.
.w-\[420px\]). If those classes change inmain.js, the responsive rules will silently stop matching. Manageable since both live in the same repo, but worth knowing.Desktop layout is untouched. No test/linter/config changes. Marking
merge-ready.