Fix #58: detail modal collapses to 0-height in Chrome / HA companion app (v1.2.7) - #59
Merged
Merged
Conversation
.modal-card capped its height with `max-height: calc(100vh - 48px)`, which the card build rewrites to `calc(100cqh - 48px)`. When Home Assistant lays the card out with an indefinite height (masonry / content-sized slots), Blink resolves 100cqh to 0, so the cap clamped to 0px and the modal shrank to just its padding. Firefox and Safari resolved the unit against the rendered height, so they were unaffected. Cap against the inset:0 overlay with `max-height: 100%` instead: identical to the old value on a normal viewport, but the overlay's height is always definite so it never collapses. Rebuilt dist, bumped to v1.2.7, added changelog. 13/13 test suites pass.
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
1 participant
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.
Closes #58.
Problem
The species detail modal collapsed to a thin strip showing only its padding in Chrome and the Home Assistant companion app (Android WebView). Firefox and Safari were fine.
Root cause
.modal-cardwas capped withmax-height: calc(100vh - 48px). The card build rewrites viewport units to container-query units, so the shipped card hadmax-height: calc(100cqh - 48px). When Home Assistant lays the card out with an indefinite height (masonry / content-sized slots — which Chrome and the companion WebView hit), Blink resolves100cqhto 0, so the cap becamecalc(0 - 48px)→ clamped to0px, and the modal shrank to just its padding. Firefox and Safari resolve the unit against the rendered height, so they were unaffected.Fix
Cap against the overlay instead of the viewport:
max-height: 100%.#detail-modalisinset:0with24pxpadding, so a flex child's100%resolves against that overlay's content box — equal to the oldcalc(… - 48px)value on a normal viewport, but the overlay's height is always definite, so it never collapses.Verification (Blink engine, same as Chrome/WebView)
max-heightcomputed to0px, card height58px(padding only).431pxacross indefinite-height, flex-column, definite-600px, and short-360px layouts. Full content confirmed by screenshot.npm test→ 13/13 suites pass (includingtest-card.js/test-xss.js, which parse the rebuiltdist).Changes
homeassistant/www/styles.css— the one-line fix (with explanatory comment)dist/habird-card.js— rebuiltCHANGELOG.md— v1.2.7 entrypackage.json,homeassistant/card/build.js— version bump to 1.2.7