Skip to content

refactor(web): a calmer modal and Settings page - #84

Merged
JoseEstevez520 merged 7 commits into
developfrom
refactor/calm-settings
Oct 15, 2026
Merged

JoseEstevez520 merged 7 commits into
developfrom
refactor/calm-settings

Conversation

@JoseEstevez520

Copy link
Copy Markdown
Collaborator

The modal and the Settings page were busier than they needed to be. This follows how elastic-ui draws them (its DECISIONS.md: no blur, text never scales, fewer boxes) and how Kolmi lays out Settings.

Modal (components/ui/Modal.tsx, used by 10 dialogs; its props don't change)

  • The box changes its real size, from the control that opened it to the panel, instead of scaling the whole window. The text is laid out at its final size and uncovered, so it is never stretched.
  • It dims the page with a flat 40% black. The backdrop blur is gone.
  • 16px radius, a hairline and a soft shadow, instead of a 28px radius and a heavy shadow.
  • The content fades in once the box is mostly there and leaves first when it closes. Closing is faster than opening.
  • With reduced motion (system or declared in onboarding) it just appears.
  • The box follows the panel's size. Before, a list that loaded after the window opened overflowed it.

Settings

  • One centred column. Rows are separated by space instead of lines, and the subtitles are gone. The detail about sharing bug reports sits behind an info icon.
  • Password, email and delete account are one row each, with the form in a window. Before there were six open fields.
  • The Appearance box is unchanged.
  • The "some features are unavailable" notice stays dismissed in that browser. It comes back only when a different capability is missing.
  • Textarea's label is now tied to its field, as Input's already was.

I tested it against the real app: while the window opens, the box goes from 192×93 to 512×394 with transform: none the whole way, and the box and the panel have the same height once a late-loading list arrives.

Not covered: the close animation and reduced motion were checked in tests, not by eye. The Appearance box and the learner's Settings page keep their old look.

Web: 1054 tests pass, lint and typecheck are clean. The only red check is test_llm_client.py::test_a_model_whose_thinking_is_opt_in_is_left_alone, which fails the same way on main and develop.

@JoseEstevez520
JoseEstevez520 merged commit 635084b into develop Oct 15, 2026
2 of 3 checks passed
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