@rr0/ufoathome 0.50.0 → 0.50.1

package/dist-embed-scene/rr0-scene.mjs

@@ -19,7 +19,16 @@ const mm=`
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;
@@ -170,12 +179,29 @@ const mm=`
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+/* Stretched over an outer stage by <rr0-scene> (see its .ufo-overlay rule, position:absolute with
+   inset:0): there the height is genuinely imposed from outside and this box has to take all of it,
+   or the toolbar and the corner buttons anchored to it stop reaching the real edges — which is what
+   they are anchored to it FOR. The host carries that class, so the two cases are told apart by the
+   one thing that actually differs between them, rather than by a percentage that has to guess. */
+:host(.ufo-overlay) .stage {
+  height: 100%;
+}
 /* The browser's own fullscreen UA styles force the fullscreened element (.stage) to fill the
    whole viewport (100vw/100vh) regardless of its content's aspect ratio. .toolbar/.corner-buttons
    are anchored to .stage itself (not .frame) specifically so they stay pinned to the true screen

package/dist-embed-sighting/rr0-sighting.mjs

@@ -357,7 +357,16 @@ const Lm=`
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;
@@ -508,12 +517,29 @@ const Lm=`
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+/* Stretched over an outer stage by <rr0-scene> (see its .ufo-overlay rule, position:absolute with
+   inset:0): there the height is genuinely imposed from outside and this box has to take all of it,
+   or the toolbar and the corner buttons anchored to it stop reaching the real edges — which is what
+   they are anchored to it FOR. The host carries that class, so the two cases are told apart by the
+   one thing that actually differs between them, rather than by a percentage that has to guess. */
+:host(.ufo-overlay) .stage {
+  height: 100%;
+}
 /* The browser's own fullscreen UA styles force the fullscreened element (.stage) to fill the
    whole viewport (100vw/100vh) regardless of its content's aspect ratio. .toolbar/.corner-buttons
    are anchored to .stage itself (not .frame) specifically so they stay pinned to the true screen

package/dist-embed-sighting-editor/rr0-sighting-editor.mjs

@@ -1092,12 +1092,29 @@ select.weather-field:disabled {
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+/* Stretched over an outer stage by <rr0-scene> (see its .ufo-overlay rule, position:absolute with
+   inset:0): there the height is genuinely imposed from outside and this box has to take all of it,
+   or the toolbar and the corner buttons anchored to it stop reaching the real edges — which is what
+   they are anchored to it FOR. The host carries that class, so the two cases are told apart by the
+   one thing that actually differs between them, rather than by a percentage that has to guess. */
+:host(.ufo-overlay) .stage {
+  height: 100%;
+}
 /* The browser's own fullscreen UA styles force the fullscreened element (.stage) to fill the
    whole viewport (100vw/100vh) regardless of its content's aspect ratio. .toolbar/.corner-buttons
    are anchored to .stage itself (not .frame) specifically so they stay pinned to the true screen
@@ -1424,7 +1441,16 @@ input[type=range] {
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;

package/dist-embed-ufo/rr0-ufo.mjs

@@ -73,12 +73,29 @@ const It=`
 .stage {
   position: relative;
   width: 100%;
-  height: 100%;
+  /* AUTO, with the aspect ratio deciding the height — never a percentage.
+     A percentage height resolves against a parent whose own height this box is producing, and that
+     cycle does not always settle the same way: in a page column 585 px wide it came out 851 px tall
+     on rr0.org's case dossiers and 329 px in a bare page of the same width, from the same CSS. A
+     portrait box for a 16:9 recording, with the overlay stretched two and a half times vertically
+     over a 3D scene that had correctly reshaped itself to match. The ratio alone has no cycle to
+     settle: the width is definite, so the height follows from it.
+     The two places a real height IS imposed override this below — fullscreen, and (in
+     ufoTemplate) an overlay stretched over an outer stage by inset:0. */
+  height: auto;
   aspect-ratio: 640 / 360;
   display: flex;
   align-items: center;
   justify-content: center;
 }
+/* Stretched over an outer stage by <rr0-scene> (see its .ufo-overlay rule, position:absolute with
+   inset:0): there the height is genuinely imposed from outside and this box has to take all of it,
+   or the toolbar and the corner buttons anchored to it stop reaching the real edges — which is what
+   they are anchored to it FOR. The host carries that class, so the two cases are told apart by the
+   one thing that actually differs between them, rather than by a percentage that has to guess. */
+:host(.ufo-overlay) .stage {
+  height: 100%;
+}
 /* The browser's own fullscreen UA styles force the fullscreened element (.stage) to fill the
    whole viewport (100vw/100vh) regardless of its content's aspect ratio. .toolbar/.corner-buttons
    are anchored to .stage itself (not .frame) specifically so they stay pinned to the true screen

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rr0/ufoathome",
   "type": "module",
-  "version": "0.50.0",
+  "version": "0.50.1",
   "description": "UFO@home — record and replay a UFO sighting's shape, movement and appearance",
   "author": "Jérôme Beau <rr0@rr0.org> (https://rr0.org)",
   "license": "MIT",