From d5b9201e29c5b55ecf75172b5ea94c2c20ae9874 Mon Sep 17 00:00:00 2001
From: Timothy Kim <timothykim@fastmail.fm>
Date: Fri, 10 Jul 2026 15:17:47 -0400
Subject: [PATCH] Revert "align factoring problems on the equal sign"

This reverts commit eb225bae4b9b51f037e0e889424f21aaf2d7a4ff.
---
 static/factoring.html | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/static/factoring.html b/static/factoring.html
index a01fcf0..2d41d7f 100644
--- a/static/factoring.html
+++ b/static/factoring.html
@@ -93,22 +93,21 @@
   }
 
   .problem {
-    display: grid;
-    grid-template-columns: 26px 1fr auto auto;
+    display: flex;
     align-items: baseline;
-    column-gap: 6px;
+    gap: 6px;
     font-size: 1.2rem;
     font-weight: 700;
     padding: 7px 4px;
     border-bottom: 1px solid #e0e0e0;
   }
   .prob-num {
+    min-width: 26px;
     font-size: 0.78rem;
     font-weight: 800;
     color: #999;
+    flex-shrink: 0;
   }
-  .lhs { text-align: right; }
-  .rhs { text-align: left; }
   .answer-line {
     border-bottom: 2px solid #111;
     min-width: 34px;
@@ -223,24 +222,23 @@ function renderProblems() {
   // Part I - Factor: given a + b, write the factored form
   const partA = genUnique(PER_PART).map((t, i) =>
     `<div class="problem"><span class="prob-num">${i+1}.</span>` +
-    `<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
-    `<span class="rhs"><span class="answer-line"></span>(<span class="answer-line"></span> + <span class="answer-line"></span>)</span>` +
-    `</div>`
+    `<span>${t.a} + ${t.b} = ` +
+    `<span class="answer-line"></span>(<span class="answer-line"></span> + <span class="answer-line"></span>)` +
+    `</span></div>`
   ).join('');
 
   // Part II - Expand: given x(y + z), write the sum
   const partB = genUnique(PER_PART).map((t, i) =>
     `<div class="problem"><span class="prob-num">${i+1}.</span>` +
-    `<span class="lhs">${t.x}(${t.y} + ${t.z})</span><span>=</span>` +
-    `<span class="rhs"><span class="answer-line"></span> + <span class="answer-line"></span></span>` +
-    `</div>`
+    `<span>${t.x}(${t.y} + ${t.z}) = ` +
+    `<span class="answer-line"></span> + <span class="answer-line"></span>` +
+    `</span></div>`
   ).join('');
 
   // Part III - Find the common factor: fill the box
   const partC = genUnique(PER_PART).map((t, i) =>
     `<div class="problem"><span class="prob-num">${i+1}.</span>` +
-    `<span class="lhs">${t.a} + ${t.b}</span><span>=</span>` +
-    `<span class="rhs"><span class="box-blank"></span>(${t.y} + ${t.z})</span></div>`
+    `<span>${t.a} + ${t.b} = <span class="box-blank"></span>(${t.y} + ${t.z})</span></div>`
   ).join('');
 
   return `