From b67c47ae7d80823dc8a15f7ec0806503da60cc3e Mon Sep 17 00:00:00 2001
From: bifrost0x <dwight@scranton.de>
Date: Thu, 13 Aug 2026 13:23:35 +0200
Subject: [PATCH 1/2] Modernize connection management dialogs

---
 static/css/style.css                          | 147 ++++++++++++++++++
 static/js/sftp-file-manager.js                |   4 +-
 templates/admin.html                          |   4 +-
 templates/index.html                          | 109 +++++++++----
 tests/e2e/management-dialogs-redesign.spec.js | 115 ++++++++++++++
 tests/test_key_management_ui.py               |   2 +-
 tests/test_profile_launcher_ui.py             |   4 +-
 7 files changed, 346 insertions(+), 39 deletions(-)
 create mode 100644 tests/e2e/management-dialogs-redesign.spec.js

diff --git a/static/css/style.css b/static/css/style.css
index 4d96558..dd5e9be 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -2475,7 +2475,15 @@ body.broadcast-active .terminal-wrapper:not(.unassigned) {
 }
 
 .close {
+    display: inline-grid;
+    width: 36px;
+    height: 36px;
+    flex: 0 0 auto;
+    place-items: center;
+    border: 0;
+    background: transparent;
     font-size: 28px;
+    font-family: inherit;
     color: var(--text-secondary);
     cursor: pointer;
     line-height: 1;
@@ -2491,6 +2499,11 @@ body.broadcast-active .terminal-wrapper:not(.unassigned) {
     transform: rotate(90deg);
 }
 
+.close:focus-visible {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
+}
+
 .modal-body {
     padding: 24px;
     overflow-y: auto;
@@ -2729,6 +2742,61 @@ textarea.form-control {
     margin-bottom: 32px;
 }
 
+.manager-card {
+    min-width: 0;
+    padding: 20px;
+    border: 1px solid var(--border-color);
+    border-radius: 12px;
+    background: var(--bg-secondary);
+    background: color-mix(in srgb, var(--bg-secondary) 92%, transparent);
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
+}
+
+.manager-card-header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    gap: 12px;
+    margin-bottom: 20px;
+}
+
+.manager-card-header > .material-icons {
+    display: grid;
+    width: 36px;
+    height: 36px;
+    place-items: center;
+    border-radius: 9px;
+    background: color-mix(in srgb, var(--accent-primary) 14%, transparent);
+    color: var(--accent-primary);
+    font-size: 20px;
+}
+
+.manager-card-header :is(h3, p) {
+    margin: 0;
+}
+
+.manager-card-header p {
+    margin-top: 3px;
+    color: var(--text-secondary);
+    font-size: 12px;
+    line-height: 1.45;
+}
+
+.connection-asset-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
+    align-items: start;
+    gap: 18px;
+}
+
+.connection-asset-layout .manager-card {
+    margin-bottom: 0;
+}
+
+.connection-asset-layout .keys-list {
+    max-height: 440px;
+}
+
 .key-upload-section h3,
 .keys-list-section h3,
 .transfer-section h3 {
@@ -2740,6 +2808,12 @@ textarea.form-control {
     border-left: 3px solid var(--accent-primary);
 }
 
+.manager-card .manager-card-header h3 {
+    margin: 0;
+    padding-left: 0;
+    border-left: 0;
+}
+
 .keys-list {
     max-height: 320px;
     overflow-y: auto;
@@ -5048,6 +5122,16 @@ body.keyboard-open.notepad-focused .notepad-panel {
     }
 }
 
+@media (max-width: 820px) {
+    .connection-asset-layout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .manager-card {
+        padding: 16px;
+    }
+}
+
 @media (max-width: 480px) {
     .quick-connect-scroll-region {
         padding: 16px;
@@ -5207,6 +5291,69 @@ body.keyboard-open.notepad-focused .notepad-panel {
     transform: translateY(0);
 }
 
+.profile-management-modal-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.profile-management-modal-body > .connection-asset-nav {
+    flex: 0 0 auto;
+}
+
+#profileManagementView:not(.hidden) {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+}
+
+#profileEditorView:not(.hidden) {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+}
+
+.profile-editor-form {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    width: 100%;
+    min-height: 0;
+}
+
+.profile-editor-scroll-region {
+    min-height: 0;
+    padding-right: 10px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+}
+
+.profile-editor-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
+    align-items: start;
+    gap: 18px;
+}
+
+.profile-editor-actions {
+    margin-top: 18px;
+    padding-top: 18px;
+    background: var(--bg-modal);
+}
+
+@media (max-width: 820px) {
+    .profile-editor-grid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .profile-editor-scroll-region {
+        padding-right: 6px;
+    }
+}
+
 .profile-management-toolbar,
 .profile-management-actions {
     display: flex;
diff --git a/static/js/sftp-file-manager.js b/static/js/sftp-file-manager.js
index b70a00d..90715c7 100644
--- a/static/js/sftp-file-manager.js
+++ b/static/js/sftp-file-manager.js
@@ -77,7 +77,7 @@ class SFTPFileManager {
             <div class="modal-content fm-modal-fullwidth">
                 <div class="modal-header">
                     <h2 id="fmModalTitle"><span class="material-icons">folder_open</span> <span data-i18n="fm.title">File Manager</span></h2>
-                    <span class="close" id="fmClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                        <button type="button" class="close" id="fmClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
                 </div>
                 <div class="modal-body">
                     <!-- Toolbar -->
@@ -279,7 +279,7 @@ class SFTPFileManager {
             <div class="modal-content fm-qc-modal">
                 <div class="modal-header">
                     <h2 id="fmQcModalTitle" data-i18n="fm.qc.title">Connect to Server</h2>
-                    <span class="close" id="fmQcClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                    <button type="button" class="close" id="fmQcClose" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
                 </div>
                 <div class="modal-body">
                     <form id="fmQcForm">
diff --git a/templates/admin.html b/templates/admin.html
index 34e7258..0344801 100644
--- a/templates/admin.html
+++ b/templates/admin.html
@@ -179,7 +179,7 @@ <h2 data-i18n="backup.validation">Validation result</h2>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="addUserModalTitle" data-i18n="admin.addUser">Add User</h2>
-                <span class="close" id="closeAddUser" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeAddUser" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <div class="form-group">
@@ -203,7 +203,7 @@ <h2 id="addUserModalTitle" data-i18n="admin.addUser">Add User</h2>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="securityActionTitle" data-i18n="admin.accountRecovery">Account recovery</h2>
-                <span class="close" id="closeSecurityAction" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeSecurityAction" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <p id="securityActionHint" class="admin-muted"></p>
diff --git a/templates/index.html b/templates/index.html
index b666be8..4a030a2 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -17,7 +17,7 @@
 
     <link rel="stylesheet" href="{{ url_for('static', filename='vendor/material-icons/material-icons.css') }}">
 
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v=15">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}?v=16">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/sftp-file-manager.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/session-workspace.css') }}?v=4">
 </head>
@@ -409,7 +409,7 @@ <h4>Top memory</h4>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="connectionModalTitle" data-i18n="connection.newSSHConnection">Quick Connect</h2>
-                <span class="close" id="closeConnectionModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeConnectionModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <form id="connectionForm" class="quick-connect-form">
@@ -623,11 +623,14 @@ <h3 id="connectionDetailsTitle" data-i18n="connection.details">Connection Detail
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="settingsTitle" data-i18n="settings.title">Settings</h2>
-                <span class="close" id="closeSettingsModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeSettingsModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body settings-modal-body">
-                <section class="settings-section" aria-labelledby="settingsAppearanceTitle">
-                    <h3 id="settingsAppearanceTitle" data-i18n="settings.appearance">Appearance</h3>
+                <section class="settings-section manager-card" aria-labelledby="settingsAppearanceTitle">
+                    <div class="manager-card-header">
+                        <span class="material-icons" aria-hidden="true">palette</span>
+                        <h3 id="settingsAppearanceTitle" data-i18n="settings.appearance">Appearance</h3>
+                    </div>
                     <div class="settings-field">
                         <label for="settingsThemeSelect" data-i18n="account.theme">Theme</label>
                         <select id="settingsThemeSelect" class="form-control">
@@ -648,8 +651,11 @@ <h3 id="settingsAppearanceTitle" data-i18n="settings.appearance">Appearance</h3>
                         <select id="settingsLanguageSelect" class="form-control"></select>
                     </div>
                 </section>
-                <section class="settings-section" aria-labelledby="settingsTerminalTitle">
-                    <h3 id="settingsTerminalTitle" data-i18n="settings.terminal">Terminal</h3>
+                <section class="settings-section manager-card" aria-labelledby="settingsTerminalTitle">
+                    <div class="manager-card-header">
+                        <span class="material-icons" aria-hidden="true">terminal</span>
+                        <h3 id="settingsTerminalTitle" data-i18n="settings.terminal">Terminal</h3>
+                    </div>
                     <div class="settings-field">
                         <label for="scrollbackInput" data-i18n="account.scrollback">Scrollback</label>
                         <div class="settings-number-control">
@@ -673,9 +679,9 @@ <h3 id="settingsTerminalTitle" data-i18n="settings.terminal">Terminal</h3>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="profileManagementTitle" data-i18n="connectionAssets.hosts">Hosts</h2>
-                <span class="close" id="closeProfileManagementModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeProfileManagementModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
-            <div class="modal-body">
+            <div class="modal-body profile-management-modal-body">
                 <nav class="connection-asset-nav" aria-label="Connection assets" data-i18n-aria-label="connectionAssets.navigation">
                     <button type="button" class="connection-asset-nav-item active" data-connection-asset="hosts" aria-current="page" data-i18n="connectionAssets.hosts">Hosts</button>
                     <button type="button" class="connection-asset-nav-item" data-connection-asset="jump-hosts" data-i18n="connectionAssets.jumpHosts">Jump Hosts</button>
@@ -692,8 +698,18 @@ <h2 id="profileManagementTitle" data-i18n="connectionAssets.hosts">Hosts</h2>
                 </section>
 
                 <section id="profileEditorView" class="hidden">
-                    <form id="profileEditorForm">
+                    <form id="profileEditorForm" class="profile-editor-form">
                         <input type="hidden" id="profileEditorId">
+                        <div class="profile-editor-scroll-region">
+                            <div class="profile-editor-grid">
+                                <section id="profileConnectionDetailsCard" class="manager-card" aria-labelledby="profileConnectionDetailsTitle">
+                                    <div class="manager-card-header">
+                                        <span class="material-icons" aria-hidden="true">terminal</span>
+                                        <div>
+                                            <h3 id="profileConnectionDetailsTitle" data-i18n="connection.details">Connection Details</h3>
+                                            <p data-i18n="connection.detailsHint">Enter the destination and choose how to authenticate.</p>
+                                        </div>
+                                    </div>
                         <div class="form-group">
                             <label for="profileEditorName" data-i18n="connection.profileName">Connection Name *</label>
                             <input type="text" id="profileEditorName" class="form-control" maxlength="128" required>
@@ -746,6 +762,16 @@ <h2 id="profileManagementTitle" data-i18n="connectionAssets.hosts">Hosts</h2>
                                 <p id="profileEditorKeyUploadStatus" class="profile-inline-key-status" role="status" aria-live="polite"></p>
                             </div>
                         </div>
+                                </section>
+
+                                <section id="profileAdvancedSettingsCard" class="manager-card" aria-labelledby="profileAdvancedSettingsTitle">
+                                    <div class="manager-card-header">
+                                        <span class="material-icons" aria-hidden="true">tune</span>
+                                        <div>
+                                            <h3 id="profileAdvancedSettingsTitle" data-i18n="connection.advancedSettings">Advanced Settings</h3>
+                                            <p data-i18n="connection.advancedSettingsHint">Jump host, post-connect actions, and persistence.</p>
+                                        </div>
+                                    </div>
                         <div class="form-group">
                             <label for="profileEditorJumpHostSelect" data-i18n="connection.jumpHost">Jump Host</label>
                             <select id="profileEditorJumpHostSelect" class="form-control"></select>
@@ -785,7 +811,10 @@ <h2 id="profileManagementTitle" data-i18n="connectionAssets.hosts">Hosts</h2>
                             <label for="profileEditorCommandPreview" data-i18n="commandModes.exactPreview">Exact command preview</label>
                             <pre id="profileEditorCommandPreview" class="command-set-preview empty" aria-live="polite"></pre>
                         </div>
-                        <div class="form-actions">
+                                </section>
+                            </div>
+                        </div>
+                        <div class="form-actions profile-editor-actions">
                             <button type="button" id="cancelProfileEditorBtn" class="btn btn-secondary" data-i18n="common.cancel">Cancel</button>
                             <button type="submit" class="btn btn-primary" data-i18n="common.save">Save</button>
                         </div>
@@ -829,7 +858,7 @@ <h2 id="profileMoveConfirmationTitle" data-i18n="profiles.groupRemovalTitle">Rem
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="keyManagementTitle" data-i18n="keys.manageSSHKeys">Manage SSH Keys</h2>
-                <span class="close" id="closeKeyModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeKeyModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <nav class="connection-asset-nav" aria-label="Connection assets" data-i18n-aria-label="connectionAssets.navigation">
@@ -838,8 +867,12 @@ <h2 id="keyManagementTitle" data-i18n="keys.manageSSHKeys">Manage SSH Keys</h2>
                     <button type="button" class="connection-asset-nav-item active" data-connection-asset="keys" aria-current="page" data-i18n="connectionAssets.keys">SSH Keys</button>
                 </nav>
 
-                <div class="key-upload-section">
-                    <h3 data-i18n="keys.uploadNewKey">Upload New Key</h3>
+                <div class="connection-asset-layout">
+                <section class="key-upload-section manager-card">
+                    <div class="manager-card-header">
+                        <span class="material-icons" aria-hidden="true">upload_file</span>
+                        <h3 data-i18n="keys.uploadNewKey">Upload New Key</h3>
+                    </div>
                     <form id="keyUploadForm">
                         <div class="form-group">
                             <label for="keyNameInput" data-i18n="keys.keyName">Key Name</label>
@@ -847,16 +880,20 @@ <h3 data-i18n="keys.uploadNewKey">Upload New Key</h3>
                         </div>
                         <div class="form-group">
                             <label for="keyContentInput" data-i18n="keys.privateKey">Private Key</label>
-                            <textarea id="keyContentInput" class="form-control" rows="10" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----
+                        <textarea id="keyContentInput" class="form-control" rows="8" placeholder="-----BEGIN OPENSSH PRIVATE KEY-----
 ..." required></textarea>
                         </div>
                         <button type="submit" class="btn btn-primary"><span data-i18n="keys.uploadKey">Upload Key</span> ⬆️</button>
                     </form>
-                </div>
+                </section>
 
-                <div class="keys-list-section">
-                    <h3 data-i18n="keys.storedKeys">Stored Keys</h3>
+                <section class="keys-list-section manager-card">
+                    <div class="manager-card-header">
+                        <span class="material-icons" aria-hidden="true">key</span>
+                        <h3 data-i18n="keys.storedKeys">Stored Keys</h3>
+                    </div>
                     <div id="keysList" class="keys-list"></div>
+                </section>
                 </div>
             </div>
         </div>
@@ -866,7 +903,7 @@ <h3 data-i18n="keys.storedKeys">Stored Keys</h3>
         <div class="modal-content command-workspace-content command-set-modal-content">
             <div class="modal-header">
                 <h2 id="commandWorkspaceTitle" data-i18n="commands.workspace">Commands</h2>
-                <span class="close" id="closeCommandWorkspaceModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeCommandWorkspaceModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="command-workspace-tabs" role="tablist" aria-label="Command management" data-i18n-aria-label="accessibility.commandManagement">
                 <button type="button" id="commandSetsTab" class="command-workspace-tab active" role="tab" aria-selected="true" aria-controls="commandSetsPanel" data-command-workspace-section="sets" data-i18n="commandSets.manage">Command Sets</button>
@@ -970,7 +1007,7 @@ <h4 id="commandSetStepsHeading" data-i18n="commandSets.steps">Steps</h4>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="jumpHostManagementTitle" data-i18n="jumphosts.manage">Manage Jump Hosts</h2>
-                <span class="close" id="closeJumpHostModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeJumpHostModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <nav class="connection-asset-nav" aria-label="Connection assets" data-i18n-aria-label="connectionAssets.navigation">
@@ -978,8 +1015,12 @@ <h2 id="jumpHostManagementTitle" data-i18n="jumphosts.manage">Manage Jump Hosts<
                     <button type="button" class="connection-asset-nav-item active" data-connection-asset="jump-hosts" aria-current="page" data-i18n="connectionAssets.jumpHosts">Jump Hosts</button>
                     <button type="button" class="connection-asset-nav-item" data-connection-asset="keys" data-i18n="connectionAssets.keys">SSH Keys</button>
                 </nav>
-                <div class="key-upload-section">
-                    <h3 data-i18n="jumphosts.addNew">Add Jump Host</h3>
+                <div class="connection-asset-layout">
+                <section class="key-upload-section manager-card">
+                    <div class="manager-card-header">
+                        <span class="material-icons" aria-hidden="true">add_link</span>
+                        <h3 data-i18n="jumphosts.addNew">Add Jump Host</h3>
+                    </div>
                     <form id="jumpHostForm">
                         <div class="form-group">
                             <label for="jhNameInput" data-i18n="jumphosts.name">Name</label>
@@ -1015,10 +1056,14 @@ <h3 data-i18n="jumphosts.addNew">Add Jump Host</h3>
                         <p class="field-hint" data-i18n="jumphosts.noPasswordHint">Passwords are never stored — you enter them when connecting.</p>
                         <button type="submit" class="btn btn-primary"><span data-i18n="jumphosts.add">Add Jump Host</span></button>
                     </form>
-                </div>
-                <div class="keys-list-section">
-                    <h3 data-i18n="jumphosts.saved">Saved Jump Hosts</h3>
+                </section>
+                <section class="keys-list-section manager-card">
+                    <div class="manager-card-header">
+                        <span class="material-icons" aria-hidden="true">history</span>
+                        <h3 data-i18n="jumphosts.saved">Saved Jump Hosts</h3>
+                    </div>
                     <div id="jumpHostsList" class="keys-list"></div>
+                </section>
                 </div>
             </div>
         </div>
@@ -1030,7 +1075,7 @@ <h3 data-i18n="jumphosts.saved">Saved Jump Hosts</h3>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="commandFormTitle" data-i18n="commands.addCommand">Add New Command</h2>
-                <span class="close" id="closeCommandFormModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeCommandFormModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <form id="commandForm">
@@ -1095,7 +1140,7 @@ <h2 id="commandFormTitle" data-i18n="commands.addCommand">Add New Command</h2>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="commandPaletteTitle" data-i18n="palette.title">Command Palette</h2>
-                <span class="close" id="closeCommandPaletteModal" aria-label="Close command palette" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeCommandPaletteModal" aria-label="Close command palette" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <input type="text" id="commandPaletteInput" class="form-control" data-i18n-placeholder="palette.searchPlaceholder" placeholder="Search actions, hosts, and sessions..." autocomplete="off">
@@ -1108,7 +1153,7 @@ <h2 id="commandPaletteTitle" data-i18n="palette.title">Command Palette</h2>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="shortcutsTitle" data-i18n="shortcuts.title">Keyboard Shortcuts</h2>
-                <span class="close" id="closeShortcutsModal" aria-label="Close shortcuts" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeShortcutsModal" aria-label="Close shortcuts" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <div class="shortcuts-list" id="shortcutsList"></div>
@@ -1120,7 +1165,7 @@ <h2 id="shortcutsTitle" data-i18n="shortcuts.title">Keyboard Shortcuts</h2>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="dropUploadTitle" data-i18n="dropUpload.title">Upload File</h2>
-                <span class="close" id="closeDropUploadModal" aria-label="Close upload dialog" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeDropUploadModal" aria-label="Close upload dialog" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <form id="dropUploadForm">
@@ -1145,7 +1190,7 @@ <h2 id="dropUploadTitle" data-i18n="dropUpload.title">Upload File</h2>
         <div class="modal-content">
             <div class="modal-header">
                 <h2 id="paneAssignmentTitle" data-i18n="panes.assignTitle">Assign Sessions to Panes</h2>
-                <span class="close" id="closePaneAssignmentModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closePaneAssignmentModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
             </div>
             <div class="modal-body">
                 <div class="pane-assignment-info">
@@ -1183,7 +1228,7 @@ <h2 id="filePreviewTitle" data-i18n="preview.title">File Preview</h2>
                     <button class="btn btn-icon" id="previewRefreshBtn" title="Refresh" data-i18n-title="preview.refresh">
                         <span class="material-icons">refresh</span>
                     </button>
-                    <span class="close" id="closeFilePreviewModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</span>
+                <button type="button" class="close" id="closeFilePreviewModal" aria-label="Close" data-i18n-aria-label="common.close">&times;</button>
                 </div>
             </div>
             <div class="modal-body preview-modal-body">
@@ -1258,7 +1303,7 @@ <h2 id="filePreviewTitle" data-i18n="preview.title">File Preview</h2>
     <script src="{{ url_for('static', filename='js/session-command-launcher.js') }}?v=2"></script>
     <script src="{{ url_for('static', filename='js/file-transfer.js') }}?v=2"></script>
     <script src="{{ url_for('static', filename='js/browser-filesystem.js') }}?v=2"></script>
-    <script src="{{ url_for('static', filename='js/sftp-file-manager.js') }}?v=3"></script>
+    <script src="{{ url_for('static', filename='js/sftp-file-manager.js') }}?v=4"></script>
     <script src="{{ url_for('static', filename='js/connection-history.js') }}?v=2"></script>
     <script src="{{ url_for('static', filename='js/app.js') }}?v=12"></script>
     <script>
diff --git a/tests/e2e/management-dialogs-redesign.spec.js b/tests/e2e/management-dialogs-redesign.spec.js
new file mode 100644
index 0000000..0bc7c4c
--- /dev/null
+++ b/tests/e2e/management-dialogs-redesign.spec.js
@@ -0,0 +1,115 @@
+const { test, expect } = require('playwright/test');
+const {
+    assertNoExternalRequests,
+    login,
+    openKeyManagement,
+    openProfileManagement,
+} = require('./helpers');
+
+test.beforeEach(async ({ page }) => {
+    await login(page);
+});
+
+test.afterEach(async ({ page }) => {
+    await assertNoExternalRequests(page);
+});
+
+test('keeps saved-connection actions visible while its form scrolls', async ({ page }) => {
+    await page.setViewportSize({ width: 1100, height: 700 });
+    await openProfileManagement(page);
+    await page.locator('#newProfileBtn').click();
+    await page.locator('#profileEditorAuthType').selectOption('key');
+    await page.locator('#profileEditorAddKeyBtn').click();
+    await page.locator('#profileEditorPostConnectMode').selectOption('free_text');
+
+    await expect(page.locator('#profileConnectionDetailsCard')).toBeVisible();
+    await expect(page.locator('#profileAdvancedSettingsCard')).toBeVisible();
+    await expect(page.locator('#cancelProfileEditorBtn')).toBeVisible();
+    await expect(page.locator('#profileEditorForm button[type="submit"]')).toBeVisible();
+
+    const before = await page.locator('#profileEditorForm').evaluate(form => {
+        const scroller = form.querySelector('.profile-editor-scroll-region');
+        const actions = form.querySelector('.profile-editor-actions').getBoundingClientRect();
+        return {
+            actionsTop: actions.top,
+            clientHeight: scroller.clientHeight,
+            scrollHeight: scroller.scrollHeight,
+        };
+    });
+    expect(before.scrollHeight).toBeGreaterThan(before.clientHeight);
+
+    await page.locator('.profile-editor-scroll-region').evaluate(scroller => {
+        scroller.scrollTop = scroller.scrollHeight;
+    });
+    const after = await page.locator('#profileEditorForm').evaluate(form => ({
+        actionsTop: form.querySelector('.profile-editor-actions').getBoundingClientRect().top,
+        scrollTop: form.querySelector('.profile-editor-scroll-region').scrollTop,
+    }));
+    expect(after.scrollTop).toBeGreaterThan(0);
+    expect(after.actionsTop).toBeCloseTo(before.actionsTop, 0);
+});
+
+test('uses paired cards for jump hosts, SSH keys, and settings on desktop', async ({ page }) => {
+    await page.setViewportSize({ width: 1180, height: 760 });
+    await openProfileManagement(page);
+    await page.locator('#profileManagementModal [data-connection-asset="jump-hosts"]').click();
+
+    const jumpHostCards = page.locator('#jumpHostManagementModal .manager-card');
+    await expect(jumpHostCards).toHaveCount(2);
+    const jumpGeometry = await jumpHostCards.evaluateAll(cards => cards.map(card => (
+        card.getBoundingClientRect()
+    )));
+    expect(jumpGeometry[0].right).toBeLessThanOrEqual(jumpGeometry[1].left);
+
+    await page.locator('#jumpHostManagementModal [data-connection-asset="keys"]').click();
+    const keyCards = page.locator('#keyManagementModal .manager-card');
+    await expect(keyCards).toHaveCount(2);
+    const keyGeometry = await keyCards.evaluateAll(cards => cards.map(card => (
+        card.getBoundingClientRect()
+    )));
+    expect(keyGeometry[0].right).toBeLessThanOrEqual(keyGeometry[1].left);
+
+    await page.locator('#closeKeyModal').click();
+    await page.locator('#accountBtnHeader').click();
+    await page.locator('#accountSettingsBtn').click();
+    await expect(page.locator('#settingsModal .settings-section.manager-card')).toHaveCount(2);
+});
+
+test('stacks asset manager cards without horizontal overflow on mobile', async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await openKeyManagement(page);
+
+    const geometry = await page.locator('#keyManagementModal').evaluate(modal => {
+        const cards = [...modal.querySelectorAll('.manager-card')]
+            .map(card => card.getBoundingClientRect());
+        return {
+            firstBottom: cards[0].bottom,
+            secondTop: cards[1].top,
+            scrollWidth: modal.querySelector('.modal-body').scrollWidth,
+            clientWidth: modal.querySelector('.modal-body').clientWidth,
+        };
+    });
+    expect(geometry.firstBottom).toBeLessThanOrEqual(geometry.secondTop);
+    expect(geometry.scrollWidth).toBeLessThanOrEqual(geometry.clientWidth);
+});
+
+test('exposes every modal close control as a keyboard-focusable button', async ({ page }) => {
+    const readSemantics = () => page.locator('.modal-header .close')
+        .evaluateAll(elements => elements.map(element => ({
+            tag: element.tagName,
+            type: element.getAttribute('type'),
+            tabIndex: element.tabIndex,
+        })));
+    const workspaceSemantics = await readSemantics();
+
+    await page.goto('/admin');
+    const adminSemantics = await readSemantics();
+    const semantics = [...workspaceSemantics, ...adminSemantics];
+    expect(semantics.length).toBeGreaterThan(0);
+
+    for (const control of semantics) {
+        expect(control.tag).toBe('BUTTON');
+        expect(control.type).toBe('button');
+        expect(control.tabIndex).toBeGreaterThanOrEqual(0);
+    }
+});
diff --git a/tests/test_key_management_ui.py b/tests/test_key_management_ui.py
index 5fe2d84..5c98ed7 100644
--- a/tests/test_key_management_ui.py
+++ b/tests/test_key_management_ui.py
@@ -104,7 +104,7 @@ def test_key_replacement_event_updates_ui_and_asset_version():
     assert "filename='js/profile-manager.js') }}?v=11" in TEMPLATE
     assert "filename='js/i18n.js') }}?v=11" in TEMPLATE
     assert "filename='js/app.js') }}?v=12" in TEMPLATE
-    assert "filename='css/style.css') }}?v=15" in TEMPLATE
+    assert "filename='css/style.css') }}?v=16" in TEMPLATE
 
 
 def test_socket_events_refresh_key_ui_without_resetting_profile_editor():
diff --git a/tests/test_profile_launcher_ui.py b/tests/test_profile_launcher_ui.py
index ccaa16e..d176e8a 100644
--- a/tests/test_profile_launcher_ui.py
+++ b/tests/test_profile_launcher_ui.py
@@ -24,7 +24,7 @@ def test_template_has_one_empty_pane_renderer_and_loads_launcher_utility_first()
 def test_merged_profile_frontend_assets_have_distinct_cache_versions():
     template = read('templates/index.html')
     expected_versions = {
-        "filename='css/style.css'": '?v=15',
+        "filename='css/style.css'": '?v=16',
         "filename='js/i18n.js'": '?v=11',
         "filename='js/command-workspace.js'": '?v=2',
         "filename='js/command-palette-utils.js'": '?v=1',
@@ -131,7 +131,7 @@ def test_mobile_launcher_stacks_status_below_profile_details():
 def test_profile_launcher_stylesheet_uses_current_cache_version():
     template = read('templates/index.html')
 
-    assert "filename='css/style.css') }}?v=15" in template
+    assert "filename='css/style.css') }}?v=16" in template
 
 
 def test_active_session_command_launcher_is_loaded_after_command_data_managers():

From 794161cb2461c53549a483713a9288a2765eaf3c Mon Sep 17 00:00:00 2001
From: bifrost0x <dwight@scranton.de>
Date: Thu, 13 Aug 2026 13:41:09 +0200
Subject: [PATCH 2/2] Fix modal focus and browser test contracts

---
 static/js/app.js                   | 1 +
 static/js/profile-manager.js       | 4 +++-
 templates/index.html               | 4 ++--
 tests/e2e/profile-launcher.spec.js | 9 ++++++---
 tests/test_key_management_ui.py    | 4 ++--
 tests/test_profile_launcher_ui.py  | 4 ++--
 6 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/static/js/app.js b/static/js/app.js
index 01228b9..4b9a6ba 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1965,6 +1965,7 @@
                 render();
                 e.preventDefault();
             } else if (e.key === 'Enter') {
+                e.preventDefault();
                 activateItem(filtered[activeIndex]);
             } else if (e.key === 'Escape') {
                 closePalette();
diff --git a/static/js/profile-manager.js b/static/js/profile-manager.js
index c40578e..3f1e6fd 100644
--- a/static/js/profile-manager.js
+++ b/static/js/profile-manager.js
@@ -746,7 +746,9 @@ const ProfileManager = {
         this.loadProfiles();
         this.loadKeys();
         window.JumpHostManager?.load();
-        window.ModalManager?.open(document.getElementById('profileManagementModal'));
+        const modal = document.getElementById('profileManagementModal');
+        window.ModalManager?.open(modal);
+        modal?.querySelector('[data-connection-asset="hosts"]')?.focus();
     },
 
     showManagementList() {
diff --git a/templates/index.html b/templates/index.html
index 4a030a2..6d1f272 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1295,7 +1295,7 @@ <h2 id="filePreviewTitle" data-i18n="preview.title">File Preview</h2>
     <script src="{{ url_for('static', filename='js/session-manager.js') }}?v=6"></script>
     <script src="{{ url_for('static', filename='js/account-workspace-pulse.js') }}?v=1"></script>
     <script src="{{ url_for('static', filename='js/broadcast-input.js') }}?v=2"></script>
-    <script src="{{ url_for('static', filename='js/profile-manager.js') }}?v=11"></script>
+    <script src="{{ url_for('static', filename='js/profile-manager.js') }}?v=12"></script>
     <script src="{{ url_for('static', filename='js/jump-host-manager.js') }}?v=4"></script>
     <script src="{{ url_for('static', filename='js/command-library.js') }}?v=3"></script>
     <script src="{{ url_for('static', filename='js/command-set-manager.js') }}?v=2"></script>
@@ -1305,7 +1305,7 @@ <h2 id="filePreviewTitle" data-i18n="preview.title">File Preview</h2>
     <script src="{{ url_for('static', filename='js/browser-filesystem.js') }}?v=2"></script>
     <script src="{{ url_for('static', filename='js/sftp-file-manager.js') }}?v=4"></script>
     <script src="{{ url_for('static', filename='js/connection-history.js') }}?v=2"></script>
-    <script src="{{ url_for('static', filename='js/app.js') }}?v=12"></script>
+    <script src="{{ url_for('static', filename='js/app.js') }}?v=13"></script>
     <script>
         const flashedMessages = {{ get_flashed_messages(with_categories=true) | tojson }};
         flashedMessages.forEach(([category, message]) => {
diff --git a/tests/e2e/profile-launcher.spec.js b/tests/e2e/profile-launcher.spec.js
index fa7f61a..93913ef 100644
--- a/tests/e2e/profile-launcher.spec.js
+++ b/tests/e2e/profile-launcher.spec.js
@@ -599,19 +599,22 @@ test('modals restore focus and close by Escape or overlay while containing scrol
     const scrollState = await modal.evaluate(element => {
         const content = element.querySelector('.modal-content');
         const body = element.querySelector('.modal-body');
-        body.scrollTop = body.scrollHeight;
+        const scrollRegion = element.querySelector('#profileManagementView:not(.hidden)');
+        scrollRegion.scrollTop = scrollRegion.scrollHeight;
         const header = element.querySelector('.modal-header');
         return {
             contentOverflow: getComputedStyle(content).overflow,
             bodyOverflowY: getComputedStyle(body).overflowY,
-            scrolls: body.scrollHeight > body.clientHeight,
+            scrollRegionOverflowY: getComputedStyle(scrollRegion).overflowY,
+            scrolls: scrollRegion.scrollHeight > scrollRegion.clientHeight,
             headerTop: header.getBoundingClientRect().top,
             contentTop: content.getBoundingClientRect().top,
         };
     });
     expect(scrollState).toMatchObject({
         contentOverflow: 'hidden',
-        bodyOverflowY: 'auto',
+        bodyOverflowY: 'hidden',
+        scrollRegionOverflowY: 'auto',
         scrolls: true,
     });
     expect(scrollState.headerTop).toBeGreaterThanOrEqual(scrollState.contentTop);
diff --git a/tests/test_key_management_ui.py b/tests/test_key_management_ui.py
index 5c98ed7..70b9652 100644
--- a/tests/test_key_management_ui.py
+++ b/tests/test_key_management_ui.py
@@ -101,9 +101,9 @@ def test_key_replacement_ui_is_accessible_warns_and_keeps_secrets_out_of_markup(
 def test_key_replacement_event_updates_ui_and_asset_version():
     assert "socket.on('key_replaced'" in APP
     assert 'ProfileManager.upsertKeySummary(data.key)' in APP
-    assert "filename='js/profile-manager.js') }}?v=11" in TEMPLATE
+    assert "filename='js/profile-manager.js') }}?v=12" in TEMPLATE
     assert "filename='js/i18n.js') }}?v=11" in TEMPLATE
-    assert "filename='js/app.js') }}?v=12" in TEMPLATE
+    assert "filename='js/app.js') }}?v=13" in TEMPLATE
     assert "filename='css/style.css') }}?v=16" in TEMPLATE
 
 
diff --git a/tests/test_profile_launcher_ui.py b/tests/test_profile_launcher_ui.py
index d176e8a..144276a 100644
--- a/tests/test_profile_launcher_ui.py
+++ b/tests/test_profile_launcher_ui.py
@@ -30,7 +30,7 @@ def test_merged_profile_frontend_assets_have_distinct_cache_versions():
         "filename='js/command-palette-utils.js'": '?v=1',
         "filename='js/profile-launcher-utils.js'": '?v=5',
         "filename='js/connection-launcher.js'": '?v=1',
-        "filename='js/profile-manager.js'": '?v=11',
+        "filename='js/profile-manager.js'": '?v=12',
         "filename='js/session-manager.js'": '?v=6',
         "filename='js/terminal-manager.js'": '?v=4',
         "filename='js/jump-host-manager.js'": '?v=4',
@@ -38,7 +38,7 @@ def test_merged_profile_frontend_assets_have_distinct_cache_versions():
         "filename='js/command-set-manager.js'": '?v=2',
         "filename='js/session-command-launcher.js'": '?v=2',
         "filename='js/connection-history.js'": '?v=2',
-        "filename='js/app.js'": '?v=12',
+        "filename='js/app.js'": '?v=13',
     }
     for asset, version in expected_versions.items():
         asset_start = template.index(asset)