fix(panel): open an application's panels under its row of controls

Mode and rate limit were <details>, so each opened where its own toggle sat
and split the row of four controls in two, pushing New password and Delete
below a block of fields. The toggle is now a hidden checkbox with its label
drawn as the button and the panel is the last child of the row, so the
controls keep their places and the fields are laid out beneath all of them.
Pure CSS, so it still works with JavaScript blocked, as the disclosure did.

The panel buttons take back the form spacing the compact row style zeroes
out, and Save limit and Remove limit share one row: two posts mean two
forms, so the first button is bound to its form by the form attribute
instead of sitting inside it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
mixeme
2026-08-07 22:23:28 +03:00
parent 76f04f93d1
commit 9179818262
3 changed files with 91 additions and 34 deletions
+13
View File
@@ -45,6 +45,19 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version
wrapping rows it used to be — no drawer and no hamburger, since six entries
fit. The markup now lists the blocks in the order they are drawn, so the tab
order follows the eye instead of starting at Sign out.
- An application's mode and rate-limit fields open under its row of controls
instead of inside it. Both panels were `<details>`, so each opened where its
own toggle sat and cut the row of four in half, pushing New password and
Delete below a block of fields — the buttons moved every time a panel was
opened or closed. The toggle is now a hidden checkbox with its label drawn as
the button, and the panel is the last child of the row, so the four controls
keep their places and what a panel reveals is laid out beneath all of them.
It stays keyboard-reachable and, being pure CSS, still works with JavaScript
blocked, as the disclosure did. Inside a panel the submit buttons take the
ordinary form spacing back from the compact row style that was leaving them
flush against the field above, and Save limit and Remove limit — two posts,
hence two forms — share one row, the first button bound to its form by the
`form` attribute rather than by sitting inside it.
## [0.5.0] - 2026-08-06