Increase font size for measurement results.

And ensure it overflows on the left.  (It's right-aligned and there is
room for 10⁶ km² with one decimal which is way more than likely needed,
but we don't want any overflow to push the unit to the right side of the
box.)

2 files changed, 14 insertions, 4 deletions

diff --git a/main.js b/main.js
index 8169ff5..cbde618 100644
--- a/main.js
+++ b/main.js
@@ -3792,7 +3792,9 @@ const infoMetadataAccordions = [];
         value.nodeValue = formatters[1].format(v/10_000);
       } else {
         unit.nodeValue = 'km²';
-        value.nodeValue = formatters[1].format(v/1_000_000);
+        v /= 1_000_000;
+        const i = v < 1_000_000 ? 1 : 0; /* ≥10⁶ km² overflows the box with 2 decimals */
+        value.nodeValue = formatters[i].format(v);
       }
     };
   })();
diff --git a/style.css b/style.css
index 8800c8b..da48ebb 100644
--- a/style.css
+++ b/style.css
@@ -506,28 +506,36 @@ body.inprogress {
 #measure-panel .measure-value {
   font-family: Inter;
   font-variant-numeric: tabular-nums;
-  text-align: right;
   --measure-value-padding: .75rem;
   --measure-value-border-width: 3px;
+  --measure-value-font-size: calc(var(--bs-body-font-size) * 1.5);
   --bs-border-opacity: .75;
   border-width: var(--measure-value-border-width);
   border-style: solid;
   background: rgb(from var(--bs-secondary-bg-subtle) r g b / calc(alpha*.30));
-  height: calc(var(--bs-body-line-height) * 1.25rem + 2*var(--measure-value-padding) + 2*var(--measure-value-border-width));
+  height: calc(var(--bs-body-line-height) * var(--bs-body-font-size) * var(--measure-value-font-size)
+    + 2*var(--measure-value-padding) + 2*var(--measure-value-border-width));
   padding: var(--measure-value-padding) var(--measure-value-padding);
   margin: calc(var(--measure-value-padding)*1.5) 0;
+  display: flex;
+  justify-content: flex-end; /* overflow on the left */
   overflow: hidden;
   -webkit-user-select: text;
   -moz-user-select: text;
   user-select: text; /* eslint-disable-line css/use-baseline */
 }
 #measure-panel .measure-value :not(.measure-unit) {
-  font-size: 125%;
+  font-size: var(--measure-value-font-size);
   font-weight: 400;
 }
 #measure-panel .measure-value .measure-unit:before {
+  font-size: calc(.5*(var(--measure-value-font-size) + var(--bs-body-font-size)));
   content: '\00A0'; /* U+00A0 NO-BREAK SPACE */
 }
+#measure-panel .measure-value .measure-unit {
+  font-size: var(--bs-body-font-size);
+  line-height: calc(var(--bs-body-line-height) * var(--measure-value-font-size));
+}
 #measure-panel .btn-group {
   width: 100%;
 }