From 7ca0fc4032eb41e9ace5a9ebc1b4e9d5bbf90087 Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Tue, 17 Mar 2026 10:47:27 -0400
Subject: [PATCH] highlight: inline equation layout with responsive stacked
 fallback

- From and result now on one line: '1.00 Units = 0.09 OtherUnits'
- Same font size and color for both sides (pico-color, 600 weight)
- Container query switches to over-under at <420px with '= ' prefix on result line
- Separator '=' shown inline; muted color/normal weight to visually anchor the equation
- Removed old two-tier font sizing (small grey from, large blue result)
---
 src/app.css             | 51 +++++++++++++++++++++++++++++++++--------
 src/routes/+page.svelte |  7 ++++--
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/app.css b/src/app.css
index ba5b25c..163ce38 100644
--- a/src/app.css
+++ b/src/app.css
@@ -95,25 +95,56 @@
   overflow: hidden;
   transition: border-color 0.2s ease;
   text-align: center;
+  container-type: inline-size;
 }
 
 .highlighted-result.has-highlight {
   border-color: var(--pico-primary);
 }
 
-.highlighted-equation-from {
-  font-size: clamp(0.85rem, 2vw, 1.1rem);
-  color: var(--color-text-muted, #888880);
-  font-variant-numeric: tabular-nums;
-}
-
-.highlighted-equation-equals {
-  font-size: clamp(1.2rem, 3.5vw, 2rem);
-  font-weight: 700;
-  color: var(--pico-primary);
+/* Equation row: inline on wide screens, over-under on narrow */
+.highlighted-equation {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 0.4em;
+  font-size: clamp(1rem, 2.5cqi, 1.5rem);
+  font-weight: 600;
   font-variant-numeric: tabular-nums;
+  color: var(--pico-color);
   word-break: break-all;
   text-align: center;
+  max-width: 100%;
+}
+
+/* Switch to stacked layout when the container gets tight */
+@container (max-width: 420px) {
+  .highlighted-equation {
+    flex-direction: column;
+    gap: 0.15em;
+  }
+
+  .highlighted-eq-sep {
+    display: none;
+  }
+
+  .highlighted-eq-to::before {
+    content: '= ';
+    color: var(--pico-muted-color, #888880);
+    font-weight: 400;
+  }
+}
+
+.highlighted-eq-from,
+.highlighted-eq-to {
+  /* same size, same color — both use the container-relative font above */
+}
+
+.highlighted-eq-sep {
+  color: var(--pico-muted-color, #888880);
+  font-weight: 400;
 }
 
 .highlighted-symbol {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a831d25..48f086c 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -112,8 +112,11 @@
 <div class="highlighted-result" class:has-highlight={highlightedResult !== null} aria-live="polite">
   {#if highlightedResult !== null}
     <button class="highlight-dismiss" onclick={() => (highlightedUnitId = null)} aria-label="Remove highlight">×</button>
-    <span class="highlighted-equation-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
-    <span class="highlighted-equation-equals">= {formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
+    <div class="highlighted-equation">
+      <span class="highlighted-eq-from">{formatBig(new Big(inputValue))} {fromUnit.labelPlural}</span>
+      <span class="highlighted-eq-sep">=</span>
+      <span class="highlighted-eq-to">{formatBig(highlightedResult.convertedValue)} {highlightedResult.unit.labelPlural}</span>
+    </div>
     <span class="highlighted-symbol">{highlightedResult.unit.symbol}</span>
   {:else}
     <span class="highlighted-placeholder">Click a result to highlight it</span>