From 350d72f6aad54d4697c43ab9164840c0c79f8c51 Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Fri, 29 May 2026 00:14:40 +0100
Subject: [PATCH] ux(ssh): lay Login + Add-a-key side by side (50/50) on
 tablet/desktop

Both sections are light on content, so a two-column grid uses the space better
than full-width stacking. Wrapped them in .ssh-cols (1fr 1fr, stacks under
640px); Authorized keys stays full width below.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 containers/libreportal/frontend/css/ssh.css          | 12 ++++++++++++
 .../frontend/js/components/ssh/ssh-page.js           |  6 ++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/containers/libreportal/frontend/css/ssh.css b/containers/libreportal/frontend/css/ssh.css
index 4ea7d31..ceb0a36 100644
--- a/containers/libreportal/frontend/css/ssh.css
+++ b/containers/libreportal/frontend/css/ssh.css
@@ -33,6 +33,18 @@
     margin-top: 2px;
 }
 
+/* Login + Add-a-key are light on content, so sit them side by side (50/50) on
+   tablet/desktop; stack on mobile. Authorized keys stays full width below. */
+.ssh-cols {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    align-items: start;
+}
+@media (max-width: 640px) {
+    .ssh-cols { grid-template-columns: 1fr; }
+}
+
 .ssh-key-list {
     display: flex;
     flex-direction: column;
diff --git a/containers/libreportal/frontend/js/components/ssh/ssh-page.js b/containers/libreportal/frontend/js/components/ssh/ssh-page.js
index a595050..40e8b8a 100644
--- a/containers/libreportal/frontend/js/components/ssh/ssh-page.js
+++ b/containers/libreportal/frontend/js/components/ssh/ssh-page.js
@@ -116,8 +116,10 @@ class SshPage {
                         <p>Control who can SSH into this server (logging in as <code>${this.escape(d.user)}</code>). Grant access by adding a public key, and optionally require key-only login.</p>
                     </div>
                 </div>
-                ${section('Login', pwOn ? 'Password login is on. Add a key, then you can switch to key-only.' : 'Password login is disabled — only the keys below can connect.', loginInner)}
-                ${section('Add a key', 'Authorize a new machine to log in.', addInner)}
+                <div class="ssh-cols">
+                    ${section('Login', pwOn ? 'Password login is on. Add a key, then you can switch to key-only.' : 'Password login is disabled — only the keys below can connect.', loginInner)}
+                    ${section('Add a key', 'Authorize a new machine to log in.', addInner)}
+                </div>
                 ${section('Authorized keys', 'Machines currently allowed to SSH in.', `<div class="ssh-key-list ssh-section-body">${keysHtml}</div>`)}
             </div>
         `;