Refine the calculator result layout

e2e/calculator.spec.js

@@ -67,6 +67,9 @@ test("current values are subtracted from totals and kept during recalculation",
   await expect(subtractCurrent).toHaveAttribute("aria-pressed", "true");
   await expect(current).toBeFocused();
   await expect(totalLabel).toBeVisible();
+  await expect(tool.locator(".calculator-result-field")).toHaveClass(/has-current/);
+  await expect(tool.locator(".calculator-result").getByText("Résultat", { exact: true })).toHaveCount(0);
+  await expect(tool.locator(".calculator-result-field > span")).toHaveText("Résultat");
   const expressionBounds = await expression.boundingBox();
   const currentBounds = await current.boundingBox();
   expect(currentBounds.x).toBeCloseTo(expressionBounds.x, 0);
@@ -94,6 +97,7 @@ test("current values are subtracted from totals and kept during recalculation",
   await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "160");
   await subtractCurrent.click();
   await expect(current).toHaveCount(0);
+  await expect(tool.locator(".calculator-result-field")).not.toHaveClass(/has-current/);
   await expect(tool.locator(".calculator-result strong")).toHaveAttribute("aria-label", "180");
 });
 

e2e/style-layouts.spec.js

@@ -9,7 +9,7 @@ async function columns(locator, count) {
 
 test("calculator layout follows the tool width rather than its location", async ({ page }) => {
   await page.setViewportSize({ width: 1280, height: 900 });
-  await mountStyles(page, `<article class="module" data-module-type="calculator" style="width: 900px"><div class="calculator-module"><form class="calculator-form"><div class="calculator-card"><div class="calculator-field">Formula</div><div class="calculator-current-field">Current</div><div class="calculator-result">Result</div><label class="calculator-label-field">Label</label><button class="calculator-save-button">Save</button></div></form><div>Entries</div></div></article>`);
+  await mountStyles(page, `<article class="module" data-module-type="calculator" style="width: 900px"><div class="calculator-module"><form class="calculator-form"><div class="calculator-card"><div class="calculator-field">Formula</div><div class="calculator-current-field">Current</div><div class="calculator-result-field"><span>Result</span><div class="calculator-result"><strong>12</strong></div></div><label class="calculator-label-field">Label</label><button class="calculator-save-button">Save</button></div></form><div>Entries</div></div></article>`);
   const tool = page.locator('[data-module-type="calculator"]');
   const calculator = tool.locator(".calculator-module");
   const card = tool.locator(".calculator-card");
@@ -20,9 +20,19 @@ test("calculator layout follows the tool width rather than its location", async
   await columns(calculator, 1);
   await columns(card, 2);
   await expect(tool.locator(".calculator-field")).toHaveCSS("grid-column-start", "1");
-  await expect(tool.locator(".calculator-result")).toHaveCSS("grid-column-start", "2");
+  await expect(tool.locator(".calculator-result-field")).toHaveCSS("grid-column-start", "2");
+  await expect(tool.locator(".calculator-result")).toHaveCSS("height", "36px");
+  await expect(tool.locator(".calculator-result")).toHaveCSS("min-height", "36px");
+  const resultValue = tool.locator(".calculator-result strong");
+  const compactResultFontSize = Number.parseFloat(await computed(resultValue, "font-size"));
+  await expect(tool.locator(".calculator-result")).toHaveCSS("padding-top", "7px");
+  await tool.locator(".calculator-result-field").evaluate((element) => { element.classList.add("has-current"); });
+  await expect.poll(async () => Number.parseFloat(await computed(tool.locator(".calculator-result"), "height"))).toBeGreaterThan(36);
+  await expect.poll(async () => Number.parseFloat(await computed(resultValue, "font-size"))).toBeGreaterThan(compactResultFontSize);
+  await expect(tool.locator(".calculator-result")).toHaveCSS("padding-top", "12px");
   await tool.evaluate((element) => { element.style.width = "480px"; });
   await columns(card, 1);
+  await expect(tool.locator(".calculator-result")).toHaveCSS("min-height", "72px");
 });
 
 for (const width of [1280, 900, 390]) {

website/src/features/toolboxes/modules/CalculatorModule.jsx

@@ -306,12 +306,14 @@ export function CalculatorModule({ toolboxId, moduleId, context, textExchangeOpe
               />
             </div>
           )}
-          <div className={`calculator-result ${result == null ? "" : getResultLengthClass(result)}`} aria-live="polite">
+          <div className={`calculator-result-field ${showCurrent ? "has-current" : ""}`} aria-live="polite">
             <span>{textContent.resultLabel || "Résultat"}</span>
+            <div className={`calculator-result ${result == null ? "" : getResultLengthClass(result)}`}>
               <strong aria-label={result == null ? "-" : formatDisplayResult(result)}>
                 <FormattedCalculatorNumber value={result} />
               </strong>
             </div>
+          </div>
           <label className="calculator-label-field">
             <span>{textContent.labelLabel || "Libellé"}</span>
             <input className="nds-input" data-size="sm" type="text" value={label} onChange={(event) => setLabel(event.target.value)} placeholder={textContent.labelPlaceholder || "Lingots de fer"} />

website/src/styles/toolboxes/_calculator-results.scss

@@ -8,13 +8,17 @@
 .calculator-form label,
 .calculator-field,
 .calculator-current-field,
-.calculator-result {
+.calculator-result-field {
   display: grid;
   width: 100%;
   min-width: 0;
   gap: 7px;
 }
 
+.calculator-result-field {
+  grid-template-rows: auto minmax(0, 1fr);
+}
+
 .calculator-card > *,
 .calculator-form input {
   width: 100%;
@@ -113,7 +117,7 @@
 .calculator-field > span,
 .calculator-total-label,
 .calculator-current-field > span,
-.calculator-result span,
+.calculator-result-field > span,
 .tool-split-root-button {
   color: var(--color-text-secondary);
   font-size: var(--font-size-sm);
@@ -121,8 +125,11 @@
 }
 
 .calculator-result {
+  display: grid;
+  width: 100%;
+  min-width: 0;
   min-height: 72px;
-  justify-content: stretch;
+  align-items: end;
   padding: 12px;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
@@ -154,3 +161,20 @@
   font-size: 0.92rem;
   line-height: 1.05;
 }
+
+@container calculator-tool (min-width: 561px) and (max-width: 820px) {
+  .calculator-result-field:not(.has-current) .calculator-result {
+    height: 36px;
+    min-height: 36px;
+    padding: 7px 12px;
+    align-items: center;
+  }
+
+  .calculator-result-field:not(.has-current) .calculator-result strong,
+  .calculator-result-field:not(.has-current) .calculator-result.is-long strong,
+  .calculator-result-field:not(.has-current) .calculator-result.is-compact strong {
+    font-size: var(--font-size-md);
+    line-height: 20px;
+  }
+
+}

website/src/styles/toolboxes/_calculator.scss

@@ -43,9 +43,15 @@
     grid-row: 2;
   }
 
-  .calculator-result {
+  .calculator-result-field {
     grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+  }
+
+  .calculator-result-field.has-current {
     grid-row: 1 / 3;
+    align-self: stretch;
   }
 
   .calculator-label-field,
@@ -61,12 +67,16 @@
 
   .calculator-field,
   .calculator-current-field,
-  .calculator-result,
+  .calculator-result-field,
   .calculator-label-field,
   .calculator-save-button {
     grid-column: 1;
     grid-row: auto;
   }
+
+  .calculator-result-field.has-current {
+    grid-row: auto;
+  }
 }
 
 @supports not (container-type: inline-size) {