[erikgieseler]

Summary

Fixes five responsive/display issues in the Power Flow and Console views:

• Low battery SoE label: Values such as 4% were cut off at the bottom of the Power Flow card. The label now bottom-aligns inside the battery graphic only when it would otherwise overflow.
• Grid/home Power Flow labels on narrow cards: The labels were anchored to the diagram edges, so the right-hand label ran outside the card. Both are now centered over their respective icons, and the two circles move closer together on narrow iframes.
• Gateway mode/firmware on narrow Console cards: Long firmware values wrapped inside the badge and squeezed the connection status. The badges stay readable, the status sits with the host/IP line, and gateway cards keep enough width when multiple gateways share a row.
• MQTT and control status pills: The Connected and Control enabled labels were mathematically inside the pill but sat slightly low optically. They now use a centered flex line box.
• Gateway tags and active header link: The mode/firmware tags and the active header link had the same small font-metric offset; their text is now optically centered.

Screenshots

All pairs were captured with Playwright/Chrome at 2x device scale from actual source: before uses d680c92, after uses the UI source from this branch. git diff d680c92..9f1879c -- app/static/index.html app/static/css/page.css app/static/powerflow/app.js is empty, so the before screenshots also match base 9f1879c for the files involved. Power Flow used fixed API responses: one frozen aggregates response for both sides, SoE 4% for the 1400px (624px iframe) SoE pair, and SoE 50% for the 380px (306px iframe) label pair so the screenshots isolate the label layout. Gateway screenshots used the same fixed gateway/version payloads for both sides, with the actual old/new CSS from index.html at 380px and 1200px. The MQTT/control pill and active-header screenshots use the same live page data with the actual old/new CSS at 1400px.

Power Flow battery SoE at 4%

Before	After

Power Flow at 380px

Before	After

Gateway details at 380px

Before	After

Two gateways

Before at 1200px	After at 1200px

Before at 380px	After at 380px

Status pills

MQTT before	MQTT after

Control before	Control after

Active header link

Before	After

Testing

• node --check app/static/powerflow/app.js
• Targeted tests: tests/test_powerflow_api_base.py, tests/test_console_escaping.py, tests/test_api_md.py - 16 passed.
• Full suite with PYTHONUTF8=1 python -m pytest -q: 1362 passed, 1 skipped, 3 pre-existing environment-specific failures that also reproduce on base upstream/main 9f1879c:
  • test_battery_dispatch_ui: Windows/German number formatting (5.000 vs 5,000)
  • test_https: Windows path separator (\ vs /)
  • test_legacy_mode_parity: depends on local gateway environment configuration
• Manual Playwright checks at 380px: grid/home label centers match the icon centers (42px and 264px), the right-hand rendered text stays inside the 306px card in the captured run, and the gateway firmware stays on one line.
• SoE label at 4%: the actual old code clipped the label box at 290.08px and the glyph at 287.23px against a 280px battery bottom; the new code has both label and glyph bottoms at exactly 280px (gap 0px).
• Power Flow labels at 380px: old labels had centers 60px/302px and the right label box ended at 362px against a 306px card; new containers are centered at the icon centers 42px/264px after the diagram shrinks.
• Single gateway at 380px: old card height was 121px, firmware badge 36px, and the status was below the name; new card is 101px, keeps the firmware badge at 20px, and puts the status in the same CSS grid row as the host/IP, centered by align-items: center without a fixed vertical offset.
• Two-gateway Playwright checks: at 380px both cards stack with 20px-high firmware badges; at 1200px the new grid uses two columns (547px cards) and both firmware badges stay on one line. The old 3-column layout squeezed the first card to 359.33px and wrapped its firmware to 36px.
• MQTT/control pills at 2x: the old text ink center was 24px against a pill center of 22.5px (visibly low); the new ink center is 22px with equal flex centering.
• Active header link at 2x: old ink center 38.5px vs box center 36.5px; new ink center is exactly 36.5px.
• Gateway mode/firmware tags at 2x: old ink centers 21px/20.5px vs box center 19.5px; new centers are 19px/18.5px.
• Power Flow browser matrix: 209 combinations (11 widths x 19 SoE values) with the actual app.js and fixed API payloads. No failures: labels stayed inside, the circles stayed within the iframe, and low SoE text remained bottom-aligned. Resize checks from 380 -> 600 -> 320 px also updated the diagram width live.

[Copilot]

🟡 Changes recommended

Long hostnames or gateway IDs can overflow narrow gateway cards and overlap the connection status because .gateway-host lacks a rule to break long text.

1 open issue

• Prevent long gateway hosts from overlapping status · New

What changed in this PR

Improves responsive layout and text alignment in the Power Flow and Console views, with shared header styling also applying to History.

Changes:

• Keeps low-charge battery percentages visible and centers Power Flow labels over icons on narrow cards.
• Reworks gateway cards to improve badge readability and place connection status beside host information.
• Adjusts status-pill, badge, and navigation text alignment.

File	Description
RELEASE.md	Documents the display fixes under the upcoming release.
app/​static/​powerflow/​app.js	Adds responsive diagram sizing and updates power and battery label positioning.
app/​static/​index.html	Revises gateway-card layout and aligns status pills and badges.
app/​static/​css/​page.css	Centers shared header-link text for Console and History.

_{Review effort: Balanced}

[jasonacox]

Thanks @erikgieseler! This is a great cleanup, and the before/after screenshots and measurements made it easy to review.

I tested it against the pwsimulator from 320 to 1400px, and it holds up:

• Console: nothing overflows sideways at any width, and the firmware badges stay on one line (20px), with one gateway and with two.
• Power Flow: the grid and home labels stay inside the card and are centered over their icons at every width.
• Battery label: at 0%, 1%, 4%, 8% and 12% it now sits inside the battery. main clips it at both 0% and 4%.
• With main merged in, all 1367 tests pass.

A few small things before it can merge:

1. Merge main: RELEASE.md conflicts with fix(api): /pod status flags null when the gateway has no value #206, which also added the [0.16.1] - Upcoming section. Keep both entries under Fixed.
2. Long hostnames (Copilot's finding): I confirmed it. At 320px, a long hostname or IPv6 address in .gateway-host runs into the Connected status. Adding overflow-wrap: anywhere (as .gateway-name has) wraps it inside its column. I checked that in the browser.
3. app.js: viewportWidth: V0 is never used, because setState already triggers the re-render, so it can go.
4. app.js: please add a short comment saying what the 136 in window.innerWidth - 136 reserves.

Would you like to do these yourself, or would you like us to push them to your branch? Either is fine with me. Just let me know.

[erikgieseler]

Feel free to make the changes yourself if you have the time. I won't be able to get to it until this evening at the earliest.

[jasonacox]

Thanks @erikgieseler! I pushed the four changes to your branch:

• 23120a6 merges main, keeping both entries under 0.16.1 Fixed.
• 572db95 makes .gateway-host wrap long hostnames and IPv6 addresses (the Copilot finding), drops the unused V0, and adds a comment on the 136: it keeps 68px on each side for the grid and home circles, which sit outside the diagram's edges.

All 1367 tests pass. I re-checked it against the simulator at 320px: hostnames stay in their column, Power Flow renders, and the console shows no errors. Let me know if you'd like anything done differently.

[Copilot]

🟢 Approval recommended

No active review issues remain for the responsive layout and text-alignment changes.

No open issues 🎉

1 resolved since last review

• Prevent long gateway hosts from overlapping status

_{Review effort: Balanced}