Update resize

app.js

@@ -202,6 +202,20 @@ window.onload = function()
 
     renderFormula();
 
+    fitFormula();
+    document.fonts.ready.then(fitFormula);
+
+    // Refit only when the width changes (fitting itself changes the height)
+    let formulaWidth=0;
+    new ResizeObserver(entries=>{
+        const width=entries[0].contentRect.width;
+        if(width!==formulaWidth)
+        {
+            formulaWidth=width;
+            fitFormula();
+        }
+    }).observe(document.querySelector(".formula"));
+
     loadPreset();
 
 }
@@ -823,6 +837,27 @@ function formatEnergy(v)
 
 
 
+// Shrinks the formula so it always fits on one line.
+// All its inner sizes are in em, so the width scales linearly with font-size.
+function fitFormula()
+{
+
+    const formula=document.querySelector(".formula");
+
+    // Back to the CSS size, then scale down only if it overflows
+    formula.style.fontSize="";
+
+    const available=formula.clientWidth;
+    const needed=formula.scrollWidth;
+
+    if(needed>available)
+    {
+        const base=parseFloat(getComputedStyle(formula).fontSize);
+        formula.style.fontSize=(base*available/needed*0.98)+"px";
+    }
+
+}
+
 // Renders every element carrying a data-tex attribute
 function renderFormula()
 {

index.html

@@ -329,33 +329,37 @@
         font-size: 1.0625rem;
     }
 
+    /* Always a single line: everything inside is sized in em, and
+       fitFormula() in app.js lowers font-size when the line would overflow */
     .formula {
         flex: 1;
         display: flex;
-        align-items: stretch;
-        align-content: center;
-        flex-wrap: wrap;
-        gap: 10px;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 0.55em;
         font-size: 1.125rem;
+        white-space: nowrap;
+        overflow: hidden;
     }
 
-    .formula > span {
-        align-self: center;
+    .formula > * {
+        flex-shrink: 0;
     }
 
     .plus {
-        font-size: 1.25rem;
+        font-size: 1.11em;
         color: var(--muted);
     }
 
     .term {
+        align-self: stretch;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: space-between;
-        gap: 6px;
-        padding: 10px 14px 8px;
-        border-radius: 10px;
+        gap: 0.33em;
+        padding: 0.55em 0.78em 0.45em;
+        border-radius: 0.55em;
         border: 1.5px solid var(--c);
         background-color: color-mix(in srgb, var(--c) 16%, white);
     }
@@ -382,7 +386,7 @@
     }
 
     .termLabel {
-        font-size: 0.6875rem;
+        font-size: 0.61em;
         font-weight: 600;
         letter-spacing: 0.02em;
         color: color-mix(in srgb, var(--c) 55%, black);