HTML report: superseded status dot renders larger than other status dots due to missing box-sizing

[decko]

Finding

File: src/raki/report/templates/report.html.j2:648

The .phase-status-superseded CSS rule adds a border: 1px solid which increases the rendered dot size to ~10×10 px compared to 8×8 px for other status dots. The base .phase-status class does not set box-sizing: border-box, so the border is additive rather than inset.

Suggestion

Add box-sizing: border-box; to the .phase-status-superseded rule (or to the base .phase-status rule) so the border does not inflate the dot dimensions.

References

• Identified during review of ticket HTML report: superseded phases missing and gen-N implement sorts after submit when gen-1 is absent #319 (HTML report: superseded phases missing and gen-N implement sorts after submit when gen-1 is absent)

[decko]

Spec

Problem

.phase-status-superseded adds border: 1px solid var(--yellow), which normally would inflate the 8×8px dot to 10×10px. However, the template already has a global CSS reset * { box-sizing: border-box; } at line 27, which means the border is inset and does not add to the element's box dimensions.

Verification needed: Confirm whether the issue is still reproducible in current browsers, or was inadvertently fixed by the global box-sizing reset introduced elsewhere.

If the issue is still reproducible (e.g. the global reset is overridden somewhere, or a specific browser doesn't honour it for inline-block elements), the fix is to add an explicit box-sizing: border-box to .phase-status-superseded.

Fix (if still reproducible)

Add box-sizing: border-box to the superseded rule as a belt-and-suspenders explicit declaration:

.phase-status-superseded {
  background: var(--text-muted);
  opacity: 0.5;
  border: 1px solid var(--yellow);
  box-sizing: border-box;
}

This makes the intent explicit regardless of cascade order and is harmless if the global reset already handles it.

Acceptance Criteria

• Visually verify the superseded dot renders at the same size (8×8px) as other status dots in a browser
• If still broken: box-sizing: border-box added to .phase-status-superseded
• If already fixed by global reset: close as "not reproducible" with a comment documenting the finding
• No regression in other dot colors

---

Plan

Step 0 — Verify current behavior

Open an HTML report in a browser with superseded phases, inspect .phase-status-superseded in DevTools, and measure computed size. If it is 8×8px, the issue is already resolved by the global * { box-sizing: border-box } reset — close the issue.

Step 1 — Apply fix (if still broken)

File: src/raki/report/templates/report.html.j2:648

Change:

.phase-status-superseded { background: var(--text-muted); opacity: 0.5; border: 1px solid var(--yellow); }

To:

.phase-status-superseded { background: var(--text-muted); opacity: 0.5; border: 1px solid var(--yellow); box-sizing: border-box; }

Step 2 — No tests needed

CSS pixel-level rendering is not unit-testable. Manual browser verification is sufficient.

Step 3 — Towncrier fragment (only if fix applied)

File: changes/357.fix

Superseded phase status dots in the HTML timeline now render at the correct 8×8 px size, matching all other status dots.

Estimated scope

• 1 CSS property addition (if fix is needed)
• 0 test changes
• 1 changelog fragment (conditional)