From 5f3e9317ca2c22abf8649df873f8ba97304afad2 Mon Sep 17 00:00:00 2001
From: VooDisss <www.rickaxas@gmail.com>
Date: Wed, 1 Apr 2026 17:32:27 +0300
Subject: [PATCH] refactor(ui): align password action with status summary

Keep the Change password control on the same row as the username and password-status copy in the settings card, so the summary reads as one horizontal unit instead of stacked text followed by a separate action row.
---
 .../remote-access-settings-section.tsx        | 48 ++++++++++---------
 .../src/styles/components/settings-screen.css | 19 +++++++-
 2 files changed, 43 insertions(+), 24 deletions(-)

diff --git a/packages/ui/src/components/settings/remote-access-settings-section.tsx b/packages/ui/src/components/settings/remote-access-settings-section.tsx
index a91d8318..b9711d75 100644
--- a/packages/ui/src/components/settings/remote-access-settings-section.tsx
+++ b/packages/ui/src/components/settings/remote-access-settings-section.tsx
@@ -220,31 +220,35 @@ export const RemoteAccessSettingsSection: Component = () => {
           fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>}
         >
           <div class="settings-card-content">
-                <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
-                <p class="settings-help-text">
-                  {authStatus()!.passwordUserProvided
-                    ? t("remoteAccess.password.status.set")
-                    : t("remoteAccess.password.status.unset")}
-                </p>
+                <div class="settings-password-summary-row">
+                  <div class="settings-password-summary-copy">
+                 <p class="settings-help-text">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
+                 <p class="settings-help-text">
+                   {authStatus()!.passwordUserProvided
+                     ? t("remoteAccess.password.status.set")
+                     : t("remoteAccess.password.status.unset")}
+                 </p>
+                  </div>
 
-                <div class="settings-password-actions">
-                  <button
-                    class="settings-pill-button"
-                    type="button"
-                    onClick={() => {
-                      setPasswordFormOpen(!passwordFormOpen())
-                      setPasswordError(null)
-                    }}
-                  >
-                    {passwordFormOpen()
-                      ? t("remoteAccess.password.actions.cancel")
-                      : authStatus()!.passwordUserProvided
-                        ? t("remoteAccess.password.actions.change")
-                        : t("remoteAccess.password.actions.set")}
-                  </button>
+                  <div class="settings-password-actions">
+                    <button
+                      class="settings-pill-button"
+                      type="button"
+                      onClick={() => {
+                        setPasswordFormOpen(!passwordFormOpen())
+                        setPasswordError(null)
+                      }}
+                    >
+                      {passwordFormOpen()
+                        ? t("remoteAccess.password.actions.cancel")
+                        : authStatus()!.passwordUserProvided
+                          ? t("remoteAccess.password.actions.change")
+                          : t("remoteAccess.password.actions.set")}
+                    </button>
+                  </div>
                 </div>
 
-                <Show when={passwordFormOpen()}>
+                 <Show when={passwordFormOpen()}>
                   <div class="settings-form-group">
                     <label class="settings-form-label">{t("remoteAccess.password.form.newPassword")}</label>
                     <input
diff --git a/packages/ui/src/styles/components/settings-screen.css b/packages/ui/src/styles/components/settings-screen.css
index d4dbb366..15ad55d9 100644
--- a/packages/ui/src/styles/components/settings-screen.css
+++ b/packages/ui/src/styles/components/settings-screen.css
@@ -279,10 +279,25 @@
   font-size: var(--font-size-sm);
 }
 
+.settings-password-summary-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.settings-password-summary-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
 .settings-password-actions {
   display: flex;
-  justify-content: flex-start;
-  margin-top: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0;
 }
 
 .settings-form-group {