Advanced authentication sticky button addition

Author: rainzhang05

server/server/static/styles/advanced/main.css

@@ -139,16 +139,23 @@ body.app-loaded > :not(.app-loader) {
     border-bottom: none;
 }
 
-.advanced-header__meta {
+.advanced-header__sticky {
     position: sticky;
     top: var(--advanced-layout-sticky-top);
     z-index: 20;
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
     background: var(--surface-color);
     padding: 0.35rem 0 0.65rem;
     margin: 0;
     border-bottom: 1px solid rgba(0, 114, 206, 0.12);
 }
 
+.advanced-header__sticky .advanced-header__actions {
+    justify-content: flex-end;
+}
+
 .advanced-header__title-row {
     align-items: center;
 }
@@ -338,7 +345,7 @@ body.app-loaded > :not(.app-loader) {
 .settings-section-sentinel {
     height: 1px;
     margin: 0;
-    scroll-margin-top: calc(var(--advanced-layout-sticky-top) + 1.75rem);
+    scroll-margin-top: calc(var(--advanced-layout-sticky-top) + 2.5rem);
 }
 
 .settings-section-sentinel + .static-section,
@@ -416,10 +423,11 @@ body.app-loaded > :not(.app-loader) {
         margin-bottom: 1.5rem;
     }
 
-    .advanced-header__meta {
+    .advanced-header__sticky {
         position: static;
         border-bottom: none;
         padding: 0;
+        gap: 0.45rem;
     }
 
     .advanced-settings-layout .form-card .form-pane.active {

server/server/static/templates/advanced/tab.html

@@ -4,6 +4,9 @@
                     <div class="advanced-header">
                         <div class="advanced-header__title-row">
                             <h2>Advanced Authentication</h2>
+                        </div>
+                        <p class="tab-section-description">Configure WebAuthn registration and authentication requests with detailed settings.</p>
+                        <div class="advanced-header__sticky">
                             <div class="advanced-header__actions">
                                 <div class="advanced-header__actions-group active" data-subtab="registration">
                                     <button class="btn" onclick="advancedRegister()">Create Credential</button>
@@ -14,13 +17,12 @@ <h2>Advanced Authentication</h2>
                                     <button type="button" class="btn btn-secondary" onclick="resetAuthenticationForm()">Reset</button>
                                 </div>
                             </div>
-                        </div>
-                        <p class="tab-section-description">Configure WebAuthn registration and authentication requests with detailed settings.</p>
-                        <div class="advanced-header__meta">
-                            <div class="status" id="advanced-status"></div>
-                            <div class="sub-tabs">
-                                <button id="registration-tab-btn" class="sub-tab active" onclick="switchSubTab('registration')">Registration</button>
-                                <button id="authentication-tab-btn" class="sub-tab" onclick="switchSubTab('authentication')">Authentication</button>
+                            <div class="advanced-header__meta">
+                                <div class="status" id="advanced-status"></div>
+                                <div class="sub-tabs">
+                                    <button id="registration-tab-btn" class="sub-tab active" onclick="switchSubTab('registration')">Registration</button>
+                                    <button id="authentication-tab-btn" class="sub-tab" onclick="switchSubTab('authentication')">Authentication</button>
+                                </div>
                             </div>
                         </div>
                     </div>