Repository navigation
fix(mirror): re-measure grid width when the mirror canvas resizes - #381
Merged
Merged
Conversation
WidgetContainer measured its container width once on mount plus on window resize only. In mirror the canvas starts at the 1280 fallback width and widens to the target's real width once its viewport arrives; that widening is not a window resize, so the grid stayed laid out at the fallback size and the weather widget landed compact (294px iframe) instead of medium (332px) like on the wall. Watch the container element itself with a ResizeObserver (window resize kept as a no-ResizeObserver fallback) and report only on an actual width change, so no layout rebuild runs on a no-op.
adamecker
pushed a commit
to adamecker/HomeGlow
that referenced
this pull request
Nov 7, 2026
…rforth#382, jherforth#384) and origin/test/all-combined into test/all-combined Upstream: Stacks/display Modes/takeovers (jherforth#378), routine complete-all (jherforth#380), mirror re-measure (jherforth#381), shared New Chore dialog (jherforth#382), admin PIN chooses the mode helper (jherforth#384). Fork side: Open-Meteo provider, precipitation probability, bonus-chore return to pool, Google Tasks no-due-date fix, dock-hide-on-dialog, HA panel test seed. Conflicts (fork's jherforth#380/jherforth#382 branches vs upstream's merged versions): took upstream's refinements (scheduleOnly, tickRemainingStepsOrThrow); app.jsx combines both (dock stays hidden while dragging is false and a dialog is open). Auto-seed now strips the HA mode-helper link from seeded settings, so a new display never inherits another display's helper (jherforth#384: only the admin PIN chooses it). The Stacks tests pre-create their devices in before(), while no device has widgets yet, so auto-seed leaves them empty.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What this changes
Mirror mode renders the target device's dashboard on a canvas sized to the target's viewport, but the grid width was measured once on mount — while the canvas was still at the 1280×800 fallback viewport, before the real viewport arrived. Anything width-sensitive then rendered for the fallback width and never updated, so mirror showed the compact weather layout while the target display itself showed medium.
ResizeObserveron the grid container re-runs the width measurement whenever the measured width actually changes, so the layout follows the real viewport when it arrives.client/src/utils/containerWidth.jsholds the measure logic;WidgetContainer.jsxuses it; 7 new tests incontainerWidth.test.js.Testing
Tested end to end with demo data:
Screenshots
Before — mirror, weather compact:
After — mirror, weather medium, matching the target display:
Generated with Muse AI 🤖