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.
This commit is contained in:
VooDisss
2026-04-01 17:32:27 +03:00
parent 750e73f540
commit 5f3e9317ca
2 changed files with 43 additions and 24 deletions

View File

@@ -220,12 +220,15 @@ export const RemoteAccessSettingsSection: Component = () => {
fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>} fallback={<div class="settings-card-message">{t("remoteAccess.authStatus.unavailable")}</div>}
> >
<div class="settings-card-content"> <div class="settings-card-content">
<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">{t("remoteAccess.username", { username: authStatus()!.username ?? "codenomad" })}</p>
<p class="settings-help-text"> <p class="settings-help-text">
{authStatus()!.passwordUserProvided {authStatus()!.passwordUserProvided
? t("remoteAccess.password.status.set") ? t("remoteAccess.password.status.set")
: t("remoteAccess.password.status.unset")} : t("remoteAccess.password.status.unset")}
</p> </p>
</div>
<div class="settings-password-actions"> <div class="settings-password-actions">
<button <button
@@ -243,6 +246,7 @@ export const RemoteAccessSettingsSection: Component = () => {
: t("remoteAccess.password.actions.set")} : t("remoteAccess.password.actions.set")}
</button> </button>
</div> </div>
</div>
<Show when={passwordFormOpen()}> <Show when={passwordFormOpen()}>
<div class="settings-form-group"> <div class="settings-form-group">

View File

@@ -279,10 +279,25 @@
font-size: var(--font-size-sm); 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 { .settings-password-actions {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-end;
margin-top: 0.75rem; margin-top: 0;
} }
.settings-form-group { .settings-form-group {