Skip to content

feat(settings): enlarge Settings modal and align stacked sub-modal scrim#300

Merged
graydawnc merged 1 commit into
mainfrom
feat/settings-modal-enlarge
May 22, 2026
Merged

feat(settings): enlarge Settings modal and align stacked sub-modal scrim#300
graydawnc merged 1 commit into
mainfrom
feat/settings-modal-enlarge

Conversation

@graydawnc
Copy link
Copy Markdown
Collaborator

What

  • Settings modal frame: 720×560 → 960×680, padding px-5 → px-16 across header + content
  • Sidebar "设置" header bumped to text-xl font-semibold and lifted to pt-8 — same baseline as the right-pane section title (通用 / 安全 / etc.), so the two columns share one heading strip instead of one big title floating beside a small kicker
  • Section title strip drops its bottom divider; the new vertical rhythm carries the separation
  • AllowlistManageModal (the only sub-modal that actually stacks inside Settings today): 560 → 720 wide, anchored at pt-[15vh] instead of viewport center, scrim deepened to bg-warm-text/50 dark:bg-black/65 + backdrop-blur-md

Why

Two pain points the user surfaced while dogfooding the Security pane:

  1. The 720-wide modal sat between "big confirm dialog" and "real settings page" and didn't feel like either. Bumping to 960 makes it a proper Notion-style focused surface — content rows breathe, the right pane reads like a page rather than a cramped strip. Padding had to go up alongside the width or rows would have looked sprawling.
  2. When a sub-modal opens on top of Settings (e.g. 管理忽略列表), the previous viewport-centered, equal-opacity scrim made the inner dialog look small and disconnected from the parent. Anchoring it to pt-[15vh] matches where the Settings content actually starts, and the deeper compound scrim (outer Settings panel goes monochrome behind it) snaps focus to the inner dialog the way Notion's stacking pattern does.

How it connects

Sets the pattern for future sub-modals inside Settings — PF first-time education modal (deferred) and the Source-JSONL Restore confirm (planned as part of source-file redaction GA blocker) will both render through this same stacking convention, so the visual layering decision is locked in once instead of being re-negotiated per modal.

Test plan

  • Cmd+, opens Settings, modal is now ~960×680, headers aligned, padding feels right
  • Switching panes (通用 / 外观 / 快捷键 / 数据源 / Agent / 实验中 / 安全) — all panes still render correctly inside the wider frame
  • Click Security → Allowlist → 管理 — sub-modal anchors at upper third, parent Settings goes monochrome behind it
  • Esc on sub-modal closes only the sub-modal; Esc on Settings (no sub-modal) closes Settings
  • Light + dark themes both checked

960x680 Notion-style frame with the sidebar "Settings" heading lifted
to match the right pane title baseline — both at text-xl semibold so
the left/right columns share a single horizontal heading strip instead
of one big title floating above a small label. Content padding bumped
to px-16 for breathing room at the new width; the close-X and nav row
font sizes were nudged to keep weights balanced against the bigger
title.

AllowlistManageModal (the only sub-modal that actually stacks inside
Settings today) gets the matching Notion treatment: anchors at
pt-[15vh] instead of viewport center so it lines up with where the
Settings content begins, widens 560 -> 720 for proportional scale
against the parent, and uses a deeper warm-text/50 + black/65 +
backdrop-blur-md scrim. The two scrims compound naturally — outer
Settings goes monochrome behind it, focus snaps to the inner dialog.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@graydawnc graydawnc added this pull request to the merge queue May 22, 2026
Merged via the queue into main with commit 2e9eb79 May 22, 2026
3 checks passed
@graydawnc graydawnc deleted the feat/settings-modal-enlarge branch May 22, 2026 11:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant