Add dynamic sizing of recipe

MMM-NextcloudCookbook.js

@@ -12,6 +12,7 @@ Module.register("MMM-NextcloudCookbook", {
   start() {
     this.state = { active: false, recipe: null, error: null };
     this.hiddenModules = false;
+    window.addEventListener("resize", () => this.scheduleRecipeFit());
     this.sendSocketNotification("CONFIG", this.config);
   },
 
@@ -30,6 +31,45 @@ Module.register("MMM-NextcloudCookbook", {
     this.updateDom(this.config.animationSpeed);
   },
 
+  notificationReceived(notification) {
+    if (notification === "MODULE_DOM_UPDATED") this.scheduleRecipeFit();
+  },
+
+  scheduleRecipeFit() {
+    window.requestAnimationFrame(() => this.fitRecipe());
+  },
+
+  fitRecipe() {
+    const root = document.getElementById(this.identifier)?.querySelector(".ncc-active");
+    const recipe = root?.querySelector(".ncc-recipe");
+    if (!root || !recipe) return;
+
+    const style = window.getComputedStyle(root);
+    const availableHeight = root.clientHeight
+      - Number.parseFloat(style.paddingTop)
+      - Number.parseFloat(style.paddingBottom);
+    const availableWidth = root.clientWidth
+      - Number.parseFloat(style.paddingLeft)
+      - Number.parseFloat(style.paddingRight);
+    let minimum = 0.45;
+    let maximum = 2;
+    let best = minimum;
+
+    for (let attempt = 0; attempt < 12; attempt++) {
+      const scale = (minimum + maximum) / 2;
+      root.style.setProperty("--ncc-type-scale", scale);
+      const fits = recipe.scrollHeight <= availableHeight
+        && recipe.scrollWidth <= availableWidth;
+      if (fits) {
+        best = scale;
+        minimum = scale;
+      } else {
+        maximum = scale;
+      }
+    }
+    root.style.setProperty("--ncc-type-scale", best.toFixed(3));
+  },
+
   setRecipeMode(active) {
     if (active && !this.hiddenModules) {
       MM.getModules().exceptModule(this).enumerate((module) => {