LotusGuild/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix bracket wrapping to new lines via inline-flex on buttons

Browse Source 
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>
This commit is contained in:
Jared Vititoe
2026-03-11 23:27:00 -04:00
parent af63fbb1de
commit 658caa9f7e
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

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