v26: Fix Safari button spacing with explicit min-width

Safari was collapsing the invisible spacer button. Added min-width
and box-sizing to force consistent width across browsers.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
primal
2026-01-30 14:10:56 -05:00
parent 7bd9ee7c78
commit 655dbfdbac
3 changed files with 9 additions and 10 deletions
BIN
View File
Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

+8 -9
View File
@@ -45,17 +45,16 @@ function initDashboard() {
background: ${bg}; border: 1px solid ${border}; border-radius: 3px;
color: ${color}; cursor: pointer; margin-left: ${i > 0 ? '1px' : '0'};">${cfg.label}</button>`;
});
// Fail indicator (not clickable, just shows error state) or empty spacer for alignment
// Fail indicator (not clickable) or hidden spacer for alignment
const cfg = statusConfig.fail;
const failBtnStyle = `padding: 2px 6px; font-size: 10px; font-family: monospace;
background: ${cfg.bg}; border: 1px solid ${cfg.border}; border-radius: 3px;
color: ${cfg.color}; cursor: default; margin-left: 1px; min-width: 26px; box-sizing: border-box;`;
if (showFail) {
const cfg = statusConfig.fail;
html += `<span style="padding: 2px 6px; font-size: 10px; font-family: monospace;
background: ${cfg.bg}; border: 1px solid ${cfg.border}; border-radius: 3px;
color: ${cfg.color}; margin-left: 1px;" title="Feed has errors">${cfg.label}</span>`;
html += `<button disabled style="${failBtnStyle}" title="Feed has errors">${cfg.label}</button>`;
} else {
// Empty spacer to keep consistent width (invisible but takes space)
html += `<span style="padding: 2px 6px; font-size: 10px; font-family: monospace;
background: #111; border: 1px solid #222; border-radius: 3px;
color: #111; margin-left: 1px;">fail</span>`;
// Hidden spacer - same style but invisible
html += `<button disabled style="${failBtnStyle} opacity: 0;" aria-hidden="true">${cfg.label}</button>`;
}
html += '</div>';
return html;
+1 -1
View File
@@ -533,7 +533,7 @@ const dashboardHTML = `<!DOCTYPE html>
<div id="output"></div>
</div>
<div style="color: #333; font-size: 11px; margin-top: 10px;">v21</div>
<div style="color: #333; font-size: 11px; margin-top: 10px;">v26</div>
<div class="updated" id="updatedAt">Last updated: {{.UpdatedAt.Format "2006-01-02 15:04:05"}}</div>
</body>