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:
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
+8
-9
@@ -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
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user