Fix #58: detail modal collapses to 0-height in Chrome / HA companion app (v1.2.7)

CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 
-## v1.2.6 — 2026-07-19
+## v1.2.7 — 2026-07-24
+
+### Fixed
+- **The detail modal no longer collapses to a strip of padding in Chrome and
+  the Home Assistant companion app.** The `.modal-card` was capped 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 the
+  container-query height `100cqh` to `0`, so the cap became `calc(0 - 48px)` →
+  clamped to `0` and the modal shrank to just its padding. Firefox and Safari
+  resolved the unit against the rendered height, so they were unaffected. The
+  cap is now `max-height: 100%` against the `inset:0` overlay (whose height is
+  always definite), which equals the old value on a normal viewport but never
+  collapses. Fixes #58.
 
 ### Added
 - **64 Australian species.** Generated kachō-e illustrations (128 renders,

homeassistant/card/build.js

@@ -197,7 +197,7 @@ const wrapper = `
 // you copied the artwork locally (homeassistant/install.sh layout).
 var HABIRD_CDN_ASSETS = 'https://cdn.jsdelivr.net/gh/adamoberley/HABirdDashboard@HABirdDashboard/avian/assets/';
 
-var HABIRD_VERSION = '1.2.6';
+var HABIRD_VERSION = '1.2.7';
 
 var HABIRD_EDITOR_SCHEMA = [
   { name: 'dashboard', type: 'expandable', flatten: true, title: 'Dashboard', expanded: true, schema: [

homeassistant/www/styles.css

@@ -1276,7 +1276,15 @@
   }
   .modal-card {
     position: relative;
-    max-width: 920px; max-height: calc(100vh - 48px);
+    /* Cap to the overlay, NOT the viewport. #detail-modal is inset:0 with
+       24px padding, so 100% here == its content box == the old
+       calc(100vh - 48px) on a normal viewport - but robustly. In the card
+       build 100vh becomes 100cqh, and when Home Assistant gives the card an
+       indefinite height (masonry / content-sized slots) Blink resolves cqh
+       to 0, so calc(100cqh - 48px) collapsed to 0 and the modal shrank to a
+       strip of padding (Chrome / HA companion WebView only; Firefox & Safari
+       resolved it fine). % of the definite inset:0 overlay sidesteps that. */
+    max-width: 920px; max-height: 100%;
     width: 100%;
     background: var(--paper);
     border-radius: 14px;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "habird-dashboard",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "private": true,
   "description": "Bird Card - a live bird collage card for Home Assistant, fed by BirdNET-Go",
   "license": "CC-BY-NC-SA-4.0",