From ae3d3ce041fc549a610d68df5d2d7298df3f5563 Mon Sep 17 00:00:00 2001
From: Mikhail Yenuchenko <public@mixeme.ru>
Date: Mon, 3 Aug 2026 15:50:31 +0300
Subject: [PATCH] panel: put Applications and its create form side by side

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>
---
 internal/web/static/panel.css             |  7 +++
 internal/web/templates/domain_detail.html | 63 +++++++++++++----------
 2 files changed, 42 insertions(+), 28 deletions(-)

diff --git a/internal/web/static/panel.css b/internal/web/static/panel.css
index f264094..f03ed7c 100644
--- a/internal/web/static/panel.css
+++ b/internal/web/static/panel.css
@@ -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; }
diff --git a/internal/web/templates/domain_detail.html b/internal/web/templates/domain_detail.html
index d065888..444de74 100644
--- a/internal/web/templates/domain_detail.html
+++ b/internal/web/templates/domain_detail.html
@@ -101,6 +101,11 @@
   lost, generate a new one.</p>
 </div>
 
+{{/* Applications and its create form sit side by side on a wide viewport: the
+     table is read far more often than the form, and pairing them saves scrolling
+     past the list to add one. On a narrow viewport the .split grid stacks them
+     again, list first. */}}
+<div class="split">
 <div class="card">
   <h2>Applications</h2>
   <p class="muted">Each application is a SASL login/password an app or script
@@ -172,10 +177,39 @@
     </tbody>
   </table>
   {{else}}
-  <p class="muted">No applications yet. Create one below.</p>
+  <p class="muted">No applications yet. Create the first one with the
+  <strong>Add an application</strong> form.</p>
   {{end}}
 </div>
 
+<div class="card">
+  <h2>Add an application</h2>
+  <form method="post" action="/domains/{{.Domain.ID}}/applications">
+    <label for="login">Login</label>
+    <input id="login" name="login" type="text" placeholder="prod-server"
+           autocomplete="off" autocapitalize="none" spellcheck="false"
+           value="{{.FormLogin}}" required>
+
+    <label for="mode">Address mode</label>
+    <select id="mode" name="mode" data-list-mode="{{.List}}">
+      <option value="{{.Wildcard}}" {{if eq .FormMode .Wildcard}}selected{{end}}>Any address of the domain</option>
+      <option value="{{.List}}" {{if eq .FormMode .List}}selected{{end}}>Specific addresses (list)</option>
+    </select>
+
+    <div data-addresses>
+      <label for="addresses">Addresses (one per line or comma-separated)</label>
+      <textarea id="addresses" name="addresses" rows="3"
+                placeholder="alerts@{{.Domain.Name}}">{{.FormAddrs}}</textarea>
+    </div>
+
+    {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
+    <button type="submit">Create application</button>
+  </form>
+  <p class="muted">A strong password is generated and shown once. The login must
+  be unique across all domains and may contain letters, digits, '.', '-' and '_'.</p>
+</div>
+</div>
+
 <div class="card">
   <h2>Sending rate limit (domain)</h2>
   <p class="muted">Optional level-2 limit (spec 7.4): cap how many messages this
@@ -211,33 +245,6 @@
   {{end}}
 </div>
 
-<div class="card">
-  <h2>Add an application</h2>
-  <form method="post" action="/domains/{{.Domain.ID}}/applications">
-    <label for="login">Login</label>
-    <input id="login" name="login" type="text" placeholder="prod-server"
-           autocomplete="off" autocapitalize="none" spellcheck="false"
-           value="{{.FormLogin}}" required>
-
-    <label for="mode">Address mode</label>
-    <select id="mode" name="mode" data-list-mode="{{.List}}">
-      <option value="{{.Wildcard}}" {{if eq .FormMode .Wildcard}}selected{{end}}>Any address of the domain</option>
-      <option value="{{.List}}" {{if eq .FormMode .List}}selected{{end}}>Specific addresses (list)</option>
-    </select>
-
-    <div data-addresses>
-      <label for="addresses">Addresses (one per line or comma-separated)</label>
-      <textarea id="addresses" name="addresses" rows="3"
-                placeholder="alerts@{{.Domain.Name}}">{{.FormAddrs}}</textarea>
-    </div>
-
-    {{if .Error}}<p class="error">{{.Error}}</p>{{end}}
-    <button type="submit">Create application</button>
-  </form>
-  <p class="muted">A strong password is generated and shown once. The login must
-  be unique across all domains and may contain letters, digits, '.', '-' and '_'.</p>
-</div>
-
 <div class="card">
   <h2>Export domain</h2>
   <p class="muted">Download this domain to move it to another SelfPost instance: