[Task][Web] Add spacing above Change Recovery Passphrase divider

[miso-develop]

Parent spec

#137

Related

• [Task][Web] Keep header visible and normalize Recovery/Firmware dividers #203 — integrated shared header / divider normalization baseline

Owner

• ACTIVE_ROLE: implementation
• DOMAIN: web

State

READY_FOR_IMPLEMENTATION

Baseline

Specification baseline: main = 40f7061eb89dcc676599d7f74f1b45037e589ea2.

Current structure

After #203, Provisioning Security & Recovery subsections use:

.security-subsection {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e5e5e5;
}

and security-panel.ts gives stable subsection identities:

• data-security-subsection="recovery-package"
• data-security-subsection="change-passphrase"

The requested remaining issue is specifically the visual separation above the divider before Change Recovery Passphrase.

Objective

Increase the whitespace before the horizontal divider that introduces Change Recovery Passphrase, without changing the divider itself or Recovery Package/Passphrase behavior.

Required behavior

Within Provisioning's Security & Recovery panel:

• keep exactly one neutral horizontal divider immediately before the Change Recovery Passphrase subsection;
• add/increase margin above that divider so it is visibly separated from the preceding Recovery Package controls;
• at normal desktop width, use at least 40px-equivalent top margin before the Change Recovery Passphrase subsection boundary;
• the divider's existing padding-to-heading relationship may remain unchanged unless a small adjustment is necessary to preserve visual balance;
• do not add a second divider;
• do not move the margin below the divider when the intent is separation from the preceding subsection;
• target the stable subsection structure/class/data attribute, not localized heading text.

The Recovery Package subsection does not require the same additional increase unless a shared implementation can preserve the intended hierarchy without making its leading space excessive.

Responsive behavior

• On narrow layouts, the spacing may be reduced modestly if necessary, but must remain visibly larger than ordinary inline/control spacing and must not collapse to zero.
• No horizontal overflow or shell-width shift.
• EN/JA layouts remain equivalent.

Security / behavior preservation

Do not change:

• Recovery Package import/export semantics;
• Recovery Passphrase input/clearing behavior;
• Trusted Browser state logic;
• Passphrase-change authorization;
• secret persistence/logging rules;
• [Task][Web] Keep header visible and normalize Recovery/Firmware dividers #203's single-divider invariant;
• Factory Reset danger boundary;
• Device / Protocol / Vault behavior.

Regression coverage

Add/extend focused layout/CSS tests proving:

• Change Recovery Passphrase retains exactly one top divider;
• its subsection top margin is greater than the generic 28px security-subsection baseline and is at least 40px-equivalent at normal desktop width;
• Recovery Package remains correctly separated;
• no double divider appears;
• EN/JA rendering and current Chrome layout smoke remain green.

Prefer a semantic modifier/data-attribute/class assertion over matching translated text.

Acceptance

• Visible whitespace exists above the divider before Change Recovery Passphrase.
• Normal desktop top margin for that subsection is at least 40px-equivalent.
• Exactly one divider remains above the heading.
• Divider-to-heading spacing remains visually coherent.
• Recovery Package controls do not visually run into the Change Passphrase boundary.
• No behavior/security semantics change.
• Responsive EN/JA layout remains usable.
• Web unit/layout/Chrome smoke tests remain green.

Expected surfaces

Likely:

• web/src/style.css;
• focused Web layout tests.

A markup change in security-panel.ts should not be necessary because #203 already added a stable subsection identity.

Collision / coordination

At Specification time, open PR #206 touches Web Serial lifecycle/transport code, not style.css or Security & Recovery layout.

Implementation must still re-check exact changed files before claim.

References

• [Spec] Post-v0.1.0 usability and automatic-lock improvements #137
• [Task][Web] Keep header visible and normalize Recovery/Firmware dividers #203
• web/src/style.css
• web/src/security/security-panel.ts

[miso-develop]

HANDOFF
FROM: specification
TO: implementation
DOMAIN: web
ISSUE: #208
STATE: READY_FOR_IMPLEMENTATION

[miso-develop]

CLAIM
ROLE: implementation
DOMAIN: web
ISSUE: #208
BASE: 40f7061
BRANCH: task/208-web-passphrase-divider-spacing
STATE: IN_PROGRESS

Specification baseline exactly matches current main. Open PR #206 is Web Serial transport-only work and PR #209 is README-only; neither overlaps style.css or Provisioning layout coverage. Implementation will target the stable change-passphrase subsection identity added by #203 and preserve the single-divider/security behavior contract.

[miso-develop]

HANDOFF
FROM: implementation
TO: review
DOMAIN: web
ISSUE: #208
PR: #210
HEAD: 0b271a9
STATE: READY_FOR_REVIEW