style(web): keep header visible and normalize section dividers (#203)

[miso-develop]

Closes #203
Parent spec: #137

Shared sticky header

• make the existing shared #site-header sticky with top: 0
• keep the existing .site-nav-shell markup and 760px max-width/alignment unchanged
• keep product mark, top-level tabs, and language switcher inside the same shared header renderer
• give the sticky region an opaque page-background fill and positive stacking order
• preserve the existing <=720px two-row tab layout and <=560px compact padding
• keep the sticky header below the security-critical presence overlay (z-index: 100 vs overlay 1000)
• use normal-flow sticky positioning, so page content does not require a fixed-header offset and remains reachable

Security & Recovery subsection dividers

• wrap Recovery Package and Change Recovery Passphrase content in the same reusable .security-subsection boundary
• each wrapper adds exactly one neutral top border with shared spacing
• keep each existing h3 as the semantic subsection heading
• add no nested card and no decorative hr
• preserve all existing Recovery Package / Passphrase controls, IDs, handlers, localization, clearing, enable/disable, and security semantics

Firmware divider normalization

• make #flash-status a structural div.flash-stack instead of an outer .panel
• First install and Update remain their existing semantic section.panel peers
• the first child panel supplies the single boundary between page intro/status and First install
• Update retains its single panel boundary
• Build information remains the existing separate bottom section from [Task][Web] Add build-information sections and consistent Provisioning dividers #188
• no First install / Update / firmware target / flash-write behavior changes

Regression coverage

Production Chrome layout smoke now verifies:

• Provisioner, Firmware, and Help all share position: sticky; top: 0
• product mark, tabs, and language switcher remain inside the shared sticky header
• header is opaque and has positive stacking order
• actual vertical scrolling keeps the header at viewport top on all three routes
• nav and content-shell horizontal geometry do not shift while scrolling
• no new horizontal overflow
• <=720px two-row responsive tabs remain visible/usable while sticky
• presence overlay stacking remains above the header
• Recovery Package and Change Recovery Passphrase each have one shared subsection border, semantic h3, spacing, and no duplicate hr
• existing major Provisioning section borders and Factory Reset danger border remain unchanged
• Firmware structural status container contributes no border
• First install and Update each retain exactly one panel boundary
• First install redundant nested-panel margin is removed
• Build information and async firmware metadata geometry remain stable

Scope

Presentation/layout only:

• no Device / Protocol / Vault / Recovery behavior change
• no firmware write / erase / Update semantics change
• no release behavior change
• no navigation destination, active-tab, localization, or keyboard-order change

Base / collision

• base: b3aa8fc0cc06143990dcf32a971853264f73eba8
• no open PRs at claim or PR-creation precheck
• branch is 5 commits ahead / 0 behind the exact Specification baseline

Exact-head CI evidence pending.

[miso-develop]

Implementation evidence — Issue #203

Exact HEAD: 91babb2c8e7f6e6da7091a35c0b9902fa07978c5

Shared sticky header

• The existing shared #site-header is now position: sticky; top: 0 with an opaque background and positive stacking order.
• Existing header height/padding, .site-nav-shell 760px alignment, product mark, top-level tabs, language switcher, active-tab behavior, and DOM/tab order are preserved.
• Existing <=720px two-row tab layout and <=560px compact padding remain unchanged.
• Production-route scroll smoke verifies the header remains at viewport top on Provisioner, Firmware, and Help while nav/content-shell horizontal geometry remains stable and no horizontal overflow is introduced.
• The security-critical presence overlay keeps priority: overlay z-index 1000 remains above header z-index 100.

Security & Recovery divider normalization

• Recovery Package and Change Recovery Passphrase are wrapped in the same reusable .security-subsection presentation boundary.
• Each subsection has exactly one neutral top border with shared spacing and retains its semantic localized h3.
• No decorative hr or nested visual card was introduced.
• Existing control IDs, event handlers, localization, state clearing, enable/disable rules, Recovery Package operations, Passphrase-change behavior, and security semantics are unchanged.
• Existing major Provisioning section borders and the distinct Factory Reset danger divider remain intact.

Firmware divider normalization

• #flash-status is now a structural div.flash-stack and no longer contributes a redundant outer panel border.
• First install and Update remain their existing semantic section.panel peers and each supplies exactly one top boundary.
• First install drops the redundant nested-panel top margin; Update retains normal peer spacing.
• Build information remains the independent bottom section from [Task][Web] Add build-information sections and consistent Provisioning dividers #188.
• Firmware target resolution, First install, Update, erase/write ranges, and all firmware operation semantics are unchanged.

Regression evidence

• Web unit suite: 38 files / 300 tests passed.
• Linux Chrome production smoke: SUCCESS.
  • actual vertical sticky behavior on Provisioner / Firmware / Help
  • responsive two-row header behavior
  • overlay-over-header stacking priority
  • Recovery/Passphrase single-divider contract
  • Firmware First install/Update single-divider contract
  • existing major-section/divider and async Build information geometry regressions
• Windows Chrome production smoke: SUCCESS.
• Normal Web build and Web lockfile verification: SUCCESS.

Exact-head CI

• Security #932 / run 35347777809: SUCCESS.
• Foundation #929 / run 35347777807: SUCCESS.
  • web: SUCCESS
  • web QR Windows Chrome: SUCCESS
  • firmware: SUCCESS
  • isolated ESP-IDF build/merge: SUCCESS
  • distribution-package validation: SUCCESS
  • ESP-IDF dependency-lock verification: SUCCESS

Collision / staleness

• Current main remains b3aa8fc0cc06143990dcf32a971853264f73eba8, the exact PR base.
• PR style(web): keep header visible and normalize section dividers (#203) #205 is open, non-draft, mergeable, 8 commits ahead / 0 behind.
• PR style(web): keep header visible and normalize section dividers (#203) #205 is the only open PR at final implementation check.
• Final changed files remain exactly:
  • web/src/style.css
  • web/src/security/security-panel.ts
  • web/src/flasher.ts
  • web/tests/browser/post-provisioning-layout-smoke.ts
• No Device, Protocol, Vault, Recovery, firmware-write, release, localization, or navigation behavior was changed.

Implementation has not approved or merged this PR.

[miso-develop]

Review disposition: READY_FOR_INTEGRATION

Reviewed exact PR head 91babb2c8e7f6e6da7091a35c0b9902fa07978c5 against Issue #203 and parent usability spec #137.

No blocking finding identified.

Independent verification:

Shared sticky header

• Existing shared #site-header remains the single navigation/header root used by Provisioner, Firmware Flash, and Help.
• CSS now uses position: sticky; top: 0 with an opaque #f5f5f5 background and positive z-index: 100.
• Existing .site-nav-shell width/alignment remains unchanged at width: min(100%, 760px).
• Product mark, top-level tabs, and language switcher remain rendered inside the shared header by ui-localization.ts; active-tab and localization logic are unchanged.
• Existing <=720px two-row navigation and <=560px compact padding rules remain unchanged.
• Sticky positioning remains in normal flow, so no fixed-header offset is required and ordinary content remains reachable.
• Security-critical presence overlay remains above the sticky header: overlay z-index: 1000 vs header 100.
• No navigation destination, keyboard-order, localization, or focus-control mutation was introduced.

Security & Recovery subsection dividers

• Recovery Package and Change Recovery Passphrase are each wrapped in the same reusable .security-subsection presentation boundary.
• Each subsection receives exactly one neutral top border plus shared spacing.
• Both retain semantic h3 headings.
• No decorative hr or nested card was introduced.
• Existing control IDs, label associations, event handlers, enable/disable logic, field clearing, Recovery Package behavior, Passphrase-change behavior, browser-state locking, and security-mutation guards remain unchanged.
• Existing major peer-section divider styling and Factory Reset danger styling remain intact.

Firmware divider normalization

• #flash-status is now a structural div.flash-stack rather than an outer .panel, removing the redundant parent boundary.
• First install and Update remain separate semantic section.panel peers.
• The first child panel contributes the single boundary before First install; its redundant nested top margin is suppressed.
• Update retains its own single panel boundary and normal visual separation.
• Build information remains a separate .panel.build-info-section appended after the firmware choices.
• Firmware target resolution, First install erase behavior, state-preserving Update behavior, write ranges, release identity handling, and firmware package validation logic are unchanged.

Responsive/accessibility/layout checks

• Production Chrome smoke asserts sticky behavior on all three production routes under real vertical scrolling.
• It verifies no header/nav/content-shell horizontal shift and no new horizontal overflow.
• Responsive 360px-width coverage verifies the existing two-row tabs remain visible and sticky.
• Header opacity and overlay-over-header stacking are asserted from computed styles.
• Recovery/Passphrase dividers are asserted as CSS boundaries with semantic headings and no hr.
• Firmware smoke asserts structural status container has no top border, while First install and Update each retain exactly one panel boundary.
• Existing async firmware metadata loading/build-information geometry checks remain in the same production smoke path.

Exact-head evidence independently checked:

• Foundation #929: SUCCESS.
  • Web unit suite: 38 files / 300 tests passed.
  • Linux production Chrome smoke: SUCCESS.
  • normal Web build and lockfile verification: SUCCESS.
  • Windows Chrome QR production smoke: SUCCESS.
  • firmware regression/security contracts and isolated ESP-IDF build/package validation: SUCCESS.
• Security #932: SUCCESS, including release/security contracts and repository security scan.

Staleness/collision:

• Handoff HEAD matches current PR HEAD.
• PR is open, non-draft, mergeable.
• Current main remains exact PR base b3aa8fc0cc06143990dcf32a971853264f73eba8.
• Compare is 8 commits ahead / 0 behind.
• PR #205 is the only open PR at final Review check.

No Device, Protocol, Vault, Recovery, firmware-write, release, credential, or security semantics change is present. No additional Security review or physical Human Gate is required for this presentation/layout-only change.

[miso-develop]

HANDOFF
FROM: review
TO: integration
ISSUE: #203
PR: #205
HEAD: 91babb2
STATE: READY_FOR_INTEGRATION

[miso-develop]

READY_TO_MERGE

HEAD: 91babb2c8e7f6e6da7091a35c0b9902fa07978c5
Current main: b3aa8fc0cc06143990dcf32a971853264f73eba8

Integration reconstruction:

• exact PR head matches Review handoff
• PR is open, non-draft, mergeable
• Review disposition: READY_FOR_INTEGRATION; no blocking finding
• Foundation #929: SUCCESS
• Security #932: SUCCESS
• no unresolved review threads
• PR base equals current main
• no other open PR / collision
• no additional Security review required
• no physical Human Gate required

STATE: READY_TO_MERGE

[miso-develop]

INTEGRATED

PR: #205
Pre-merge HEAD: 91babb2c8e7f6e6da7091a35c0b9902fa07978c5
Squash merge commit / current main: 40f7061eb89dcc676599d7f74f1b45037e589ea2

Integration evidence:

• Review: READY_FOR_INTEGRATION at exact head
• Foundation #929: SUCCESS
• Security #932: SUCCESS
• no unresolved review threads
• no Human Gate required
• no additional Security review required
• Issue [Task][Web] Keep header visible and normalize Recovery/Firmware dividers #203 auto-closed as completed

STATE: INTEGRATED