Keep recipe metadata pairs together

MMM-NextcloudCookbook.css

@@ -4,7 +4,7 @@
 }
 
 .MMM-NextcloudCookbook .ncc-active {
-  --ncc-type-scale: 1;
+  --ncc-content-scale: 1;
 
   position: fixed;
   inset: 0;
@@ -54,19 +54,26 @@
 }
 
 .MMM-NextcloudCookbook .ncc-recipe h1 {
-  margin: 0 0 calc(26px * var(--ncc-type-scale));
+  margin: 0 0 26px;
   color: #fff6d8;
-  font-size: calc(82px * var(--ncc-type-scale));
+  font-size: 82px;
   line-height: 1.08;
 }
 
 .MMM-NextcloudCookbook .ncc-meta {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px 22px;
+  gap: 10px 24px;
   align-items: baseline;
-  margin: 0 0 calc(36px * var(--ncc-type-scale));
+  margin: 0 0 36px;
-  font-size: calc(36px * var(--ncc-type-scale));
+  font-size: 36px;
+}
+
+.MMM-NextcloudCookbook .ncc-meta-item {
+  display: inline-flex;
+  gap: 8px;
+  align-items: baseline;
+  white-space: nowrap;
 }
 
 .MMM-NextcloudCookbook .ncc-meta dt {
@@ -83,7 +90,7 @@
 }
 
 .MMM-NextcloudCookbook .ncc-layout-stacked section:first-child {
-  margin-bottom: calc(42px * var(--ncc-type-scale));
+  margin-bottom: calc(42px * var(--ncc-content-scale));
 }
 
 .MMM-NextcloudCookbook .ncc-layout-side-by-side {
@@ -93,21 +100,21 @@
 }
 
 .MMM-NextcloudCookbook .ncc-columns h2 {
-  margin: 0 0 calc(18px * var(--ncc-type-scale));
+  margin: 0 0 calc(18px * var(--ncc-content-scale));
   color: #d6b96b;
-  font-size: calc(56px * var(--ncc-type-scale));
+  font-size: calc(56px * var(--ncc-content-scale));
 }
 
 .MMM-NextcloudCookbook .ncc-columns ul,
 .MMM-NextcloudCookbook .ncc-columns ol {
   margin: 0;
   padding-left: 1.25em;
-  font-size: calc(50px * var(--ncc-type-scale));
+  font-size: calc(50px * var(--ncc-content-scale));
   line-height: 1.36;
 }
 
 .MMM-NextcloudCookbook .ncc-columns li {
-  margin-bottom: calc(18px * var(--ncc-type-scale));
+  margin-bottom: calc(18px * var(--ncc-content-scale));
 }
 
 .MMM-NextcloudCookbook .ncc-error {

MMM-NextcloudCookbook.js

@@ -58,7 +58,7 @@ Module.register("MMM-NextcloudCookbook", {
 
     for (let attempt = 0; attempt < 12; attempt++) {
       const scale = (minimum + maximum) / 2;
-      root.style.setProperty("--ncc-type-scale", scale);
+      root.style.setProperty("--ncc-content-scale", scale);
       const fits = recipe.scrollHeight <= availableHeight
         && recipe.scrollWidth <= availableWidth;
       if (fits) {
@@ -68,7 +68,7 @@ Module.register("MMM-NextcloudCookbook", {
         maximum = scale;
       }
     }
-    root.style.setProperty("--ncc-type-scale", best.toFixed(3));
+    root.style.setProperty("--ncc-content-scale", best.toFixed(3));
   },
 
   setRecipeMode(active) {
@@ -146,11 +146,14 @@ Module.register("MMM-NextcloudCookbook", {
       const list = document.createElement("dl");
       list.className = "ncc-meta";
       metadata.forEach(([label, value]) => {
+        const pair = document.createElement("div");
+        pair.className = "ncc-meta-item";
         const term = document.createElement("dt");
         term.textContent = label;
         const detail = document.createElement("dd");
         detail.textContent = value;
-        list.append(term, detail);
+        pair.append(term, detail);
+        list.appendChild(pair);
       });
       header.appendChild(list);
     }

README.md

@@ -25,8 +25,10 @@ link; it should look like `https://cloud.example.test/s/SHARE_TOKEN`.
 `layout` controls the full-screen recipe arrangement. Its default value,
 `"stacked"`, displays the ingredients above the instructions. Set it to
 `"side-by-side"` to display ingredients and instructions in two columns. Both
-layouts automatically enlarge the recipe to make the best use of the available
+layouts automatically scale the ingredient and instruction sections to make
-screen while keeping all of its content visible.
+the best use of the available screen while keeping all recipe content visible.
+The recipe title, timing metadata, yield, and QR controller remain at fixed
+sizes.
 
 The configured `position` controls where the QR controller appears during the
 normal MagicMirror layout. When a recipe is activated, the module displays a

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "mmm-nextcloud-cookbook",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mmm-nextcloud-cookbook",
-      "version": "0.2.0",
+      "version": "0.2.2",
       "dependencies": {
         "fast-xml-parser": "5.10.1",
         "qrcode": "1.5.4"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mmm-nextcloud-cookbook",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": true,
   "description": "Display recipes from a Nextcloud Cookbook share on MagicMirror",
   "main": "node_helper.js",