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>
This commit is contained in:
@@ -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';
|
||||
|
||||
Reference in New Issue
Block a user