fix(ui): improve CapabilityStatement cards and JSON viewer

[somysrivastava]

Summary

Fixes #902.

This PR improves the CapabilityStatement experience in both HFS and HTS by:

• Scoping CapabilityStatement layout changes to the CapabilityStatement page.
• Making card spacing and table/card layout more consistent.
• Adding Collapse all and Expand all controls to the Raw CapabilityStatement viewer.
• Supporting recursive lazy loading during Expand all.
• Preserving bounded and incremental JSON rendering.
• Making the JSON viewer keyboard-scrollable.
• Adding browser coverage for the updated behavior.

Problem

The CapabilityStatement page had inconsistent spacing between cards. In particular:

• Operations used different padding from the other cards.
• Header dividers did not align consistently.
• System Interaction content had excessive spacing.
• Table-based cards and regular cards used different body structures.

The Raw CapabilityStatement viewer also had usability issues:

• There were no global Collapse all or Expand all controls.
• Nested JSON was not consistently collapsed on initial load.
• Expanded JSON could exceed the visible card area.
• Scrolling through expanded JSON was difficult with a mouse, trackpad, or keyboard.
• Lazy-loaded nested branches were not handled by global expansion.

Changes

CapabilityStatement page scope

Added a dedicated content--capability class to the CapabilityStatement page in both HFS and HTS.

CapabilityStatement-specific layout rules are now scoped under this class, including:

• Card spacing.
• Table card padding.
• Table wrapper padding.
• Card body layout.
• Tag spacing.
• Page heading and card rhythm.

Global selectors such as .content, .card__body, .table-card, .table-wrap, and .tag retain their original behavior on unrelated pages.

Raw JSON controls

Added two controls to the shared Raw CapabilityStatement card:

• Collapse all
• Expand all

The existing chevron remains unchanged and continues to control only the outer card disclosure.

Behavior:

• When the card is closed, Expand all opens it and begins loading the JSON tree.
• When the card is open, Expand all recursively expands available nested JSON.
• Lazy-loaded fragments are processed sequentially so the browser is not flooded with requests.
• Collapse all closes nested JSON branches while leaving the outer card open.
• Closing the outer card cancels any active Expand all operation.
• Individual JSON branch expansion remains supported.

Scrolling and accessibility

The JSON body now has:

• A bounded scroll region.
• overscroll-behavior: contain.
• Keyboard focus support with tabindex="0".
• A semantic region label.

This allows expanded JSON to be inspected with:

• Mouse wheel.
• Trackpad scrolling.
• Keyboard Page Up/Page Down.
• The visible scrollbar.

Rendering safety

The existing incremental fragment architecture remains in place.

The implementation continues to:

• Load JSON fragments on demand.
• Keep large nested branches out of the DOM until expanded.
• Limit fragment page sizes.
• Abort in-flight requests when branches are collapsed.
• Avoid unbounded concurrent requests during Expand all.

Tests

Updated CapabilityStatement browser coverage to verify:

• Raw JSON controls are visible.
• The outer card opens correctly.
• Expand all loads and opens a nested branch.
• Collapse all closes nested branches without closing the outer card.
• Individual branch expansion still works.
• Expanded JSON has a bounded scroll area.
• Keyboard scrolling changes the JSON scroll position.
• Existing pagination and request cancellation behavior remains intact.
• Mobile resource filter behavior remains intact.

Validation

The following checks pass:

cargo build -p helios-hfs --features ui
cargo test -p helios-ui-chrome capability_json
cargo test -p helios-hts-ui
CI=1 npx playwright test tests/capability-statement.spec.ts