mix/selfpost
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

panel: put Applications and its create form side by side

Browse Source 
On the domain page the "Add an application" card sat below the domain rate
limit, so adding a login meant scrolling past the list and back. Move it up
next to the Applications table and wrap the pair in a .split grid (1.5fr /
1fr, so the table keeps the wider column). The columns collapse to one below
52rem, list first, and the grid gap keeps the same vertical rhythm as
.card + .card.

The empty-state text said "Create one below", which is no longer where the
form is; it now names the card instead of its position.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Микс
2026-08-03 15:50:31 +03:00
parent c8b067a686
commit ae3d3ce041
2 changed files with 42 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/panel.css
+7
View File
@@ -41,6 +41,13 @@ form.inline button { background: none; color: #2563eb; padding: 0; margin: 0; fo
form.inline button:hover { text-decoration: underline; background: none; }
main { max-width: 48rem; }
.card + .card { margin-top: 1.2rem; }
/* Two cards side by side on a wide viewport; below 60rem the columns collapse
and the grid gap keeps the same vertical rhythm as .card + .card. The inner
margin-top is cleared because the gap already spaces the pair. */
.split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.split > .card + .card { margin-top: 0; }
.card + .split, .split + .card { margin-top: 1.2rem; }
@media (max-width: 52rem) { .split { grid-template-columns: minmax(0, 1fr); } }
.flash { background: #ecfdf3; border: 1px solid #abefc6; color: #067647; padding: 0.7rem 1rem; border-radius: 8px; margin-bottom: 1.2rem; }
@media (prefers-color-scheme: dark) { .flash { background: #0d2818 !important; border-color: #1a5336 !important; color: #75d99b !important; } }
table { width: 100%; border-collapse: collapse; }