@mideind/netskrafl-react 3.4.8 → 3.4.9

package/dist/esm/css/netskrafl.css

@@ -1037,6 +1037,14 @@ div.netskrafl-container.legacy-colors table.bag-content tr td {
    BASE CONTAINER STYLES
    ========================================================================== */
 
+.netskrafl-container div.netskrafl,
+.netskrafl-container div.gatadagsins {
+    /* React wrapper around the Mithril UI. Stretch to the host's
+       allocated slot so `.netskrafl-container` (height: 100%) resolves
+       to a definite size. */
+    height: 100%;
+}
+
 div.netskrafl-container {
     /* The outer container fills its parent and paints the background */
     width: 100%;
@@ -1053,8 +1061,16 @@ div.netskrafl-container {
     padding-top: 4px;
     /* font-family: var(--primary-font); */
     width: 375px;
-    height: calc(100vh - 58px);
-    height: calc(100dvh - 58px);
+    /* Fill the host-allocated slot. The previous fixed `100dvh - 58px`
+       guessed the host's chrome height; that worked for hosts whose
+       header was ~58px and broke elsewhere — clipping the bottom of the
+       action buttons on phones like iPhone 13 portrait. Using `100%`
+       lets the host's container chain (e.g. flex `h-full` inside an
+       inset that fills `100vh - header`) own the height contract.
+       The wrapper rules below propagate `height: 100%` from the
+       outermost `.netskrafl` / `.gatadagsins` div so this resolves to a
+       definite size. */
+    height: 100%;
     overflow-x: hidden;
     overflow-y: visible;
     margin: 0 auto;