From e0354b09c0e1d9a135afc2fd18685ddca2b6bb89 Mon Sep 17 00:00:00 2001
From: Ananovo <techotaku39@outlook.com>
Date: Sat, 15 Aug 2026 11:14:12 +0800
Subject: [PATCH] fix(web): align new-session and settings controls (#1578)

---
 .../components/NewSession/ActionButtons.tsx    |  2 +-
 web/src/components/NewSession/index.tsx        |  2 +-
 .../components/settings/CompanionPairing.tsx   |  2 +-
 .../components/settings/SettingsPrimitives.tsx |  2 +-
 .../settings/TranscriptionProviderOnboard.tsx  |  2 +-
 .../settings/VoiceAdvancedControls.tsx         | 16 ++++++++--------
 web/src/routes/settings/storage.tsx            | 18 ++++++++++--------
 7 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/web/src/components/NewSession/ActionButtons.tsx b/web/src/components/NewSession/ActionButtons.tsx
index 00b6b9f8..44728fa6 100644
--- a/web/src/components/NewSession/ActionButtons.tsx
+++ b/web/src/components/NewSession/ActionButtons.tsx
@@ -13,7 +13,7 @@ export function ActionButtons(props: {
     const { t } = useTranslation()
 
     return (
-        <div className="flex gap-2 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
+        <div className="flex w-full justify-end gap-2 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
             <Button
                 variant="secondary"
                 onClick={props.onCancel}
diff --git a/web/src/components/NewSession/index.tsx b/web/src/components/NewSession/index.tsx
index a825a114..68f83eab 100644
--- a/web/src/components/NewSession/index.tsx
+++ b/web/src/components/NewSession/index.tsx
@@ -1498,7 +1498,7 @@ export function NewSession(props: {
     )
 
     return (
-        <div className="flex flex-col divide-y divide-[var(--app-divider)]">
+        <div className="flex flex-col divide-y divide-[var(--app-divider)] [&>div]:pr-[10px] lg:[&>div]:pr-3">
             <MachineSelector
                 machines={props.machines}
                 machineId={machineId}
diff --git a/web/src/components/settings/CompanionPairing.tsx b/web/src/components/settings/CompanionPairing.tsx
index 1c1db9c6..0420af48 100644
--- a/web/src/components/settings/CompanionPairing.tsx
+++ b/web/src/components/settings/CompanionPairing.tsx
@@ -89,7 +89,7 @@ export function CompanionPairing({ baseUrl }: CompanionPairingProps) {
                     type="button"
                     variant="outline"
                     onClick={() => setRevealed(true)}
-                    className="self-start"
+                    className="self-center"
                 >
                     {t('settings.companion.showQr')}
                 </Button>
diff --git a/web/src/components/settings/SettingsPrimitives.tsx b/web/src/components/settings/SettingsPrimitives.tsx
index b695cdc2..4bc32f91 100644
--- a/web/src/components/settings/SettingsPrimitives.tsx
+++ b/web/src/components/settings/SettingsPrimitives.tsx
@@ -29,7 +29,7 @@ export function CheckIcon(props: { className?: string }) {
 
 export function SettingsPageContent(props: { description?: string; children: ReactNode }) {
     return (
-        <div className="mx-auto w-full max-w-[720px] space-y-5 px-3 py-4 lg:px-6 lg:py-6">
+        <div className="mx-auto w-full max-w-[720px] space-y-5 pl-3 pr-[10px] py-4 lg:px-6 lg:py-6">
             <div>
                 {props.description ? <p className="text-sm text-[var(--app-hint)]">{props.description}</p> : null}
             </div>
diff --git a/web/src/components/settings/TranscriptionProviderOnboard.tsx b/web/src/components/settings/TranscriptionProviderOnboard.tsx
index d1ce8aeb..a374011b 100644
--- a/web/src/components/settings/TranscriptionProviderOnboard.tsx
+++ b/web/src/components/settings/TranscriptionProviderOnboard.tsx
@@ -291,7 +291,7 @@ export function TranscriptionProviderOnboard(props: {
             {error ? <p className="text-xs text-red-500">{error}</p> : null}
             {message ? <p className="text-xs text-[var(--app-hint)]">{message}</p> : null}
 
-            <div className="flex flex-wrap gap-2">
+            <div className="flex flex-wrap items-center justify-end gap-2">
                 <Button type="button" size="sm" disabled={busy || selected?.editable === false} onClick={() => void save()}>
                     {t('settings.voice.credentials.save')}
                 </Button>
diff --git a/web/src/components/settings/VoiceAdvancedControls.tsx b/web/src/components/settings/VoiceAdvancedControls.tsx
index b3c4f8cd..1eded3cb 100644
--- a/web/src/components/settings/VoiceAdvancedControls.tsx
+++ b/web/src/components/settings/VoiceAdvancedControls.tsx
@@ -130,14 +130,14 @@ export function VoicePersonaControls(props: {
                         onChange={(e) => setIdentity(e.target.value === DEFAULT_VOICE_IDENTITY ? '' : e.target.value)}
                         rows={6} maxLength={VOICE_IDENTITY_MAX_LENGTH} spellCheck={false}
                         className="w-full resize-y rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-2 font-mono text-xs leading-relaxed text-[var(--app-fg)]" />
-                    <div className="flex flex-wrap gap-2">
+                    <div className="flex flex-wrap items-center justify-end gap-2">
+                        <span className="text-xs text-[var(--app-hint)]">
+                            {prefs.identity.trim() ? props.t('settings.voice.identity.customized') : props.t('settings.voice.identity.default')}
+                        </span>
                         <button type="button" onClick={resetIdentity}
                             className="rounded-md border border-[var(--app-border)] px-2 py-1 text-xs text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]">
                             {props.t('settings.voice.identity.reset')}
                         </button>
-                        <span className="text-xs text-[var(--app-hint)]">
-                            {prefs.identity.trim() ? props.t('settings.voice.identity.customized') : props.t('settings.voice.identity.default')}
-                        </span>
                     </div>
                 </div>
             )}
@@ -156,7 +156,7 @@ export function VoicePersonaControls(props: {
                         onChange={(e) => setCharacter(e.target.value === DEFAULT_VOICE_CHARACTER ? '' : e.target.value)}
                         rows={8} maxLength={VOICE_CHARACTER_MAX_LENGTH} spellCheck={false}
                         className="w-full resize-y rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-2 py-2 font-mono text-xs leading-relaxed text-[var(--app-fg)]" />
-                    <div className="flex flex-wrap items-center gap-2">
+                    <div className="flex flex-wrap items-center justify-end gap-2">
                         <button type="button" onClick={resetCharacter}
                             className="rounded-md border border-[var(--app-border)] px-2 py-1 text-xs text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]">
                             {props.t('settings.voice.character.reset')}
@@ -190,11 +190,11 @@ export function VoicePersonaControls(props: {
                 <ChevronDownIcon className={`shrink-0 transition-transform ${deliveryOpen ? 'rotate-180' : ''}`} />
             </button>
             {deliveryOpen && (
-                <div className="space-y-1 border-t border-[var(--app-divider)] bg-[var(--app-subtle-bg)]/40 pb-2">
-                    <p className="px-3 pt-2 text-xs text-[var(--app-hint)]">
+                <div className="space-y-2 border-t border-[var(--app-divider)] bg-[var(--app-subtle-bg)]/40 px-3 py-3">
+                    <p className="text-xs text-[var(--app-hint)]">
                         {props.t('settings.voice.character.presetSlidersHint')}
                     </p>
-                    <label className="block px-3 pt-1">
+                    <label className="block">
                         <span className="mb-1 block text-sm text-[var(--app-fg)]">
                             {props.t('settings.voice.character.preset.label')}
                         </span>
diff --git a/web/src/routes/settings/storage.tsx b/web/src/routes/settings/storage.tsx
index e4e43993..be7749be 100644
--- a/web/src/routes/settings/storage.tsx
+++ b/web/src/routes/settings/storage.tsx
@@ -55,14 +55,16 @@ export default function SettingsStoragePage() {
                     }}
                 />
             ) : null}
-            <button
-                type="button"
-                onClick={() => void query.refetch()}
-                disabled={query.isFetching}
-                className="rounded-lg bg-[var(--app-button)] px-3 py-2 text-sm font-medium text-[var(--app-button-text)] disabled:opacity-50"
-            >
-                {query.isFetching ? t('settings.storage.refreshing') : t('settings.storage.refresh')}
-            </button>
+            <div className="flex justify-end">
+                <button
+                    type="button"
+                    onClick={() => void query.refetch()}
+                    disabled={query.isFetching}
+                    className="rounded-lg bg-[var(--app-button)] px-3 py-2 text-sm font-medium text-[var(--app-button-text)] disabled:opacity-50"
+                >
+                    {query.isFetching ? t('settings.storage.refreshing') : t('settings.storage.refresh')}
+                </button>
+            </div>
         </SettingsPageContent>
     )
 }