fix(ui): make branded footer span full width on desktop

[dmchaledev]

Summary

On desktop, the branded "by HailBytes — managed attack surface management" footer renders cramped at only 300px wide, wrapping awkwardly under the form panel, instead of spanning the full width of the widget.

This is a layout bug in the shipped web component — the lead-gen surface embedded on partner sites — so it's user-facing on every desktop render where branding is shown.

Root cause

The footer is the third child of .body, which is a CSS grid:

.body { display: grid; grid-template-columns: 300px 1fr; ... }

.body's first two children (.form-panel, .results-panel) fill row 1. With grid auto-placement, the third child (.hb-footer) lands in row 2 / column 1 — the narrow 300px column. .hb-footer had no grid-column, so nothing pulled it back to full width. The mobile layout (grid-template-columns: 1fr under 700px) was unaffected and already rendered correctly.

Fix

One line — span the footer across all grid columns:

.hb-footer {
  grid-column: 1 / -1;
  ...
}

Verification

Measured the rendered footer in headless Chromium (widget width 900px):

	footer width
before	300px (jammed in the form column)
after	900px (full width)

Before / after, dark theme:

Before	After
footer wraps under the 300px form column	footer spans full width, centered

npm test → 65 passing, 0 failing (no behavior/logic touched — CSS only).

Scope

• hailbytes-vuln-calculator.js — one CSS line in the inline STYLES block. No change to markup, calculation engine, output shape, types, or the mobile layout.

🤖 Generated with Claude Code

---

Generated by Claude Code