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 {

Control who can SSH into this server (logging in as ${this.escape(d.user)}). Grant access by adding a public key, and optionally require key-only login.

- ${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)} +
+ ${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)} +
${section('Authorized keys', 'Machines currently allowed to SSH in.', `
${keysHtml}
`)} `;