Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(ssh): lay Login + Add-a-key side by side (50/50) on tablet/desktop

Browse Source 
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>
This commit is contained in:
librelad 2026-05-29 00:14:40 +01:00
parent 76524d1c35
commit 350d72f6aa
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
containers/libreportal/frontend/css/ssh.css
View File

@ -33,6 +33,18 @@
margin-top: 2px; 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 { .ssh-key-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

6
containers/libreportal/frontend/js/components/ssh/ssh-page.js
View File

@ -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> <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>
</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)} <div class="ssh-cols">
${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)}
</div>
${section('Authorized keys', 'Machines currently allowed to SSH in.', `<div class="ssh-key-list ssh-section-body">${keysHtml}</div>`)} ${section('Authorized keys', 'Machines currently allowed to SSH in.', `<div class="ssh-key-list ssh-section-body">${keysHtml}</div>`)}
</div> </div>
`; `;