fix(tauri): keep settings dialog Close button visible with sticky header

[maosuarez]

Summary

The Close button in the Settings dialog scrolls out of view when the panel is taller than the viewport. This pins the dialog header so the button is always reachable.

Closes #354.

Problem

.about-card scrolls internally (max-height: calc(100vh - 40px); overflow-y: auto). Its child .about-top — which holds the dialog title and the Close button — was a normal-flow element, so it scrolled away with the content. On Windows the Settings panel is long enough to trigger this consistently; the same can happen on any platform whenever the window is short enough to cause overflow.

Fix

CSS-only. The header is pinned with position: sticky, and the card's top padding is moved into the header so it pins flush to the card's top edge:

.about-card {
  /* was: padding: 22px 22px 20px; — top padding moved into .about-top */
  padding: 0 22px 20px;
}

.about-top {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-elevated);
  /* Full-bleed to the card edges so scrolling content is covered. The 22px
     top padding (moved off .about-card) restores the header inset, and the
     16px bottom keeps the original gap to the first section. No negative top
     margin, so the header pins flush to the card's top edge with no gap. */
  margin: 0 -22px 0;
  padding: 22px 22px 16px;
}

• position: sticky; top: 0 pins the header at the top of the scrollable card.
• background: var(--bg-elevated) is the card's own surface token, so content does not show through as it scrolls underneath.
• Moving the card's 22px top padding into the header's padding-top makes the scrollport start at the card's top border, so the header pins flush with no gap above it — and the full-bleed side margins (margin: 0 -22px 0) let the header background reach the card edges, fully covering content scrolling underneath with no peek at the sides.
• Spacing is unchanged at rest: top inset stays 22px, and the 16px gap below the header is preserved.

Why this approach

An earlier iteration used a negative top margin to cover the card padding, but that fights position: sticky: at rest the negative margin places the header at the card border, while top: 0 re-anchors it 22px lower (at the padding edge) during scroll — producing a floating gap above the header and overlap below it. Moving the top padding into the header avoids that entirely: the pinned position and the rest position coincide.

Platform behaviour

• macOS: visually identical. The About and Settings dialogs render pixel-identical at rest (the padding simply lives in the header now), and position: sticky is inert when a dialog fits without scrolling.
• Windows / short windows: header stays pinned; the Close button is always reachable.
• .about-top / .about-card are shared by both the About and Settings dialogs. The About dialog is short and never overflows, so it is unaffected — intended behaviour.

No Rust changes. No new dependencies.

Maintainer approval

silverstein green-lit this approach in the issue thread:

"Green light on position: sticky; top: 0 for .about-top, with the card's background color set on it so content does not show through as it scrolls under. CSS-only, platform-agnostic, and macOS stays identical, so no concerns. Please send the PR."

Testing

Verified visually by rendering the Settings dialog markup with the patched CSS in a standalone harness (Chrome headless, dark theme), captured at scroll top and mid-scroll:

• At rest: header sits flush at the card's top with the normal 22px inset and the usual 16px gap to the first section.
• Mid-scroll: header pins flush to the card's top edge — no floating gap above it — and content scrolls cleanly underneath, fully covered by the header background with no overlap. Rounded top corners preserved.

No Rust unit tests apply (CSS-only change). macOS path is a visual no-op (sticky is inert without overflow).

[vercel]

@maosuarez is attempting to deploy a commit to the evil genius laboratory Team on Vercel.

A member of the Team first needs to authorize it.