From 658caa9f7eb8ee6a82d16f5e781341d57a118fde Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 11 Mar 2026 23:27:00 -0400
Subject: [PATCH] Fix bracket wrapping to new lines via inline-flex on buttons

The CSS ::before/::after pseudo-elements for [ ] brackets were rendering
on separate lines because button HTML had multiline whitespace (newlines +
indentation) inside the tag, causing:
  [
    Button Text
  ]

Fix: set button display to inline-flex with align-items:center so
pseudo-elements become flex children that stay on the same line
as button content regardless of internal whitespace. Also add
white-space:nowrap and flex-shrink:0 on pseudo-elements.

Also fix compareBtn.style.display to use inline-flex to avoid
reverting to block-level display that would re-introduce wrapping.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/index.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index efa93a6..8775a44 100644
--- a/public/index.html
+++ b/public/index.html
@@ -338,6 +338,10 @@
         .status.waiting::before { content: '[⏳'; margin-right: 4px; }
         .status.waiting::after { content: ']'; margin-left: 4px; }
         button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0;
             background: transparent;
             color: var(--terminal-green);
             border: 2px solid var(--terminal-green);
@@ -351,9 +355,10 @@
             transition: all 0.3s ease;
             margin-right: 10px;
             margin-bottom: 10px;
+            white-space: nowrap;
         }
-        button::before { content: '[ '; }
-        button::after { content: ' ]'; }
+        button::before { content: '[ '; flex-shrink: 0; }
+        button::after { content: ' ]'; flex-shrink: 0; }
         /* Suppress bracket pseudo-elements for tab/nav buttons and inline-styled sub-tabs */
         button.tab::before, button.tab::after,
         button[style*="border:none"]::before, button[style*="border:none"]::after { content: none; }
@@ -1648,7 +1653,7 @@
                 btn.textContent = '✗ Exit Compare Mode';
                 btn.style.borderColor = 'var(--terminal-amber)';
                 btn.style.color = 'var(--terminal-amber)';
-                compareBtn.style.display = 'inline-block';
+                compareBtn.style.display = 'inline-flex';
                 instructions.style.display = 'block';
             } else {
                 btn.textContent = '📊 Compare Mode';