From 7140012a98a19d85f0205d9e0f5308038114ebed Mon Sep 17 00:00:00 2001
From: Shinuwa <git@shinuwa.fr>
Date: Sun, 9 Aug 2026 18:05:37 +0200
Subject: [PATCH] Polish calculator large number readability v2

---
 .../features/toolboxes/modules/CalculatorModule.jsx   | 11 +++++++++--
 website/src/styles/_toolboxes.scss                    |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/website/src/features/toolboxes/modules/CalculatorModule.jsx b/website/src/features/toolboxes/modules/CalculatorModule.jsx
index b506ca7..88b8563 100644
--- a/website/src/features/toolboxes/modules/CalculatorModule.jsx
+++ b/website/src/features/toolboxes/modules/CalculatorModule.jsx
@@ -36,6 +36,13 @@ function getResultLengthClass(value) {
   return "";
 }
 
+function getEntryResultLengthClass(value) {
+  const length = formatResult(value).replace(/[^\d]/g, "").length;
+  if (length >= 21) return "is-compact";
+  if (length >= 18) return "is-long";
+  return "";
+}
+
 function getChildren(entries, parentId) {
   return entries.filter((entry) => (entry.parentId || "") === parentId);
 }
@@ -264,7 +271,7 @@ function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentI
             {entry.id === editingId ? (
               <>
                 <span className="tool-split-entry-value is-readonly" title={textContent.readonlyValueTitle || "Quantité non modifiable"}>
-                  <strong className={getResultLengthClass(entry.value)} aria-label={formatDisplayResult(entry.value)}>
+                  <strong className={getEntryResultLengthClass(entry.value)} aria-label={formatDisplayResult(entry.value)}>
                     <FormattedCalculatorNumber value={entry.value} />
                   </strong>
                 </span>
@@ -273,7 +280,7 @@ function CalculatorEntries({ entries, parentId, getScopedParentId, activeParentI
             ) : (
               <button className="tool-split-entry-summary" type="button" onClick={() => onUse(entry)} title={textContent.useEntryTitle || "Utiliser comme base"}>
                 <span>
-                  <strong className={getResultLengthClass(entry.value)} aria-label={formatDisplayResult(entry.value)}>
+                  <strong className={getEntryResultLengthClass(entry.value)} aria-label={formatDisplayResult(entry.value)}>
                     <FormattedCalculatorNumber value={entry.value} />
                   </strong>
                   {entry.label && <em>{entry.label}</em>}
diff --git a/website/src/styles/_toolboxes.scss b/website/src/styles/_toolboxes.scss
index be08932..9fcc4b7 100644
--- a/website/src/styles/_toolboxes.scss
+++ b/website/src/styles/_toolboxes.scss
@@ -5252,7 +5252,7 @@ button.combo-input-token.combo-value-grab .ui-icon {
 
 .calculator-number-group.is-muted,
 .calculator-number-separator {
-  color: rgba(180, 189, 211, 0.68);
+  color: rgba(215, 221, 237, 0.84);
 }
 
 .calculator-number-separator {