Skip to content

Fix/favorites stale refresh#11

Merged
cayossarian merged 6 commits into
mainfrom
fix/favorites_stale_refresh
Apr 19, 2026
Merged

Fix/favorites stale refresh#11
cayossarian merged 6 commits into
mainfrom
fix/favorites_stale_refresh

Conversation

@cayossarian
Copy link
Copy Markdown
Member

Fix stale favorites refresh and fold rows on narrow screens to avoid name occlusion

…silently

Restores _recoverIfNeeded helper removed during the LitElement refactor
(c4154d2). The visibilitychange handler now wraps _scheduleTabRender in
try/catch and verifies #tab-content received content; on thrown error
or zero child nodes, it retries with 2s/4s/6s backoff up to 3 attempts.

The Favorites render path clears its container before awaiting several
async build steps (FavoritesController.build, fetchAndBuildHorizonMaps,
fetchMergedMonitoringStatus). When the browser tab is backgrounded and
HA's WebSocket drops, one of those resolves empty or null without
throwing, leaving the container blank with no console error and no
mechanism to retry. By Panel survives because its simpler dashboard
render produces an error message on failure instead of a silent bail.
The .list-row flex gap of 10px was applied between every pair of row
children, including the ON/OFF badge (or toggle-pill) and the power
reading. On narrow displays that gap came out of the flex:1 circuit
name, truncating the label earlier than necessary.

Negative margin-left on .list-power-value cancels the preceding gap
without touching the gap before the gear or after the power value,
so the row layout stays intact and the freed space is absorbed by
.list-circuit-name.
…he relay

The previous margin-left:-10px only closed the 10px flex gap, but the
visible space came from .list-power-value's 70px min-width and
text-align:right — short values like '1.3A' sat right-aligned in a 70px
cell, leaving a 40+ px blank column that robbed horizontal space from
.list-circuit-name on narrow rows. Let the value size to its content so
the freed width flows back into the flex:1 name column.
Both list rows and By Panel breaker cells were truncating circuit
names hard at phone-width displays. At narrow widths we now collapse
to a two-row layout where the name occupies the full first row
(paired with the expand chevron on list rows) and the
badges/controls/reading/gear drop to a second row with the relay
snug against the power/current value.

List rows use a viewport media query at 520px (the row always spans
the full list-view width at that point). Breaker cells use a
container query on .panel-grid so the fold triggers on the cell's
own width (each cell is half the grid), not the viewport — grid
widths below ~760px put cells under ~340px, which is where the name
starts to ellipsize. display:contents on the cell's nested wrappers
lets the outer grid place leaf elements directly via grid-area.
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes a Favorites-view blanking issue after tab visibility restoration and improves narrow-screen readability by folding circuit rows/cells to prevent name truncation/occlusion.

Changes:

  • Add a visibility-restore recovery path that retries tab renders with backoff when #tab-content remains empty after a render attempt.
  • Introduce responsive folding for “By Panel” breaker cells via container queries and for list rows via a narrow-viewport grid layout; adjust list power-value sizing to free space for names.
  • Document the fixes and UI changes in the changelog.

Reviewed changes

Copilot reviewed 3 out of 5 changed files in this pull request and generated 2 comments.

File Description
src/panel/span-panel.ts Adds _recoverIfNeeded() with retry/backoff and wires it to visibilitychange, plus timer cleanup on disconnect.
src/card/card-styles.ts Adds container-query based folding for panel grid cells; adds narrow-viewport folding for list rows; removes list power value min-width/right-align.
CHANGELOG.md Adds release notes describing the favorites recovery fix and narrow-layout changes.

Comment thread src/panel/span-panel.ts Outdated
Comment thread CHANGELOG.md Outdated
Copilot flagged that MAX_ATTEMPTS=3 with initial attempt=0 yields four
total renders, not three. Rename the constant to MAX_RETRIES and
update the changelog to describe the behaviour as 'initial render
plus up to three retries at 2s/4s/6s backoff' so the code, doc, and
actual count all agree.
@cayossarian cayossarian merged commit 0f1b97e into main Apr 19, 2026
2 checks passed
@cayossarian cayossarian deleted the fix/favorites_stale_refresh branch April 19, 2026 20:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants