@h-ai/ui 0.1.0-alpha.62 → 0.1.0-alpha.63

package/dist/components/scenes/crud/CrudPage.svelte.d.ts

@@ -1,60 +1,9 @@
 import type { Snippet } from 'svelte';
 import type { DataAttributes } from '../../../types.js';
+import type { CrudFieldDef } from './crud-controller.svelte.js';
 import type { CrudDensity, CrudFormConfig, CrudPaginationConfig, CrudToolbarStyle } from './crud-types.js';
 import type { NavAdapter } from './nav-adapter.js';
-/** CRUD 字段定义，决定列表、筛选器和表单的字段行为。 */
-type FieldDef = {
-    /** 字段稳定标识，同时对应数据记录中的属性名。 */
-    id: string;
-    /** 字段显示文案，允许通过函数延迟读取当前语言。 */
-    label: string | (() => string);
-    /** 字段控件类型，最终由表单或筛选器解释。 */
-    type: string;
-    /** 是否出现在列表中；未设置时默认显示。 */
-    inList?: boolean;
-    /** 是否出现在筛选器中；只有显式为 true 时显示。 */
-    filterable?: boolean;
-    /** 编辑时是否禁止修改。 */
-    readonly?: boolean;
-    /** 是否出现在新建表单中；未设置时默认显示。 */
-    inCreate?: boolean;
-    /** 是否出现在编辑表单中；未设置时默认显示。 */
-    inEdit?: boolean;
-    /** 是否出现在详情面板中；未设置时默认显示。 */
-    inDetail?: boolean;
-    /** 选择类字段的静态选项或动态选项工厂。 */
-    options?: Array<{
-        label: string;
-        value: string | number | boolean;
-    }> | (() => Array<{
-        label: string;
-        value: string | number | boolean;
-    }>);
-    /** 表单校验规则。 */
-    validation?: {
-        required?: boolean;
-        min?: number;
-        max?: number;
-        pattern?: string;
-        message?: string;
-    };
-    /** 列宽 CSS 值。 */
-    width?: string;
-    /** 单元格对齐方式。 */
-    align?: 'left' | 'center' | 'right';
-    /** 列表单元格的自定义渲染函数。 */
-    render?: (value: unknown, item: Record<string, unknown>) => string;
-    /** 输入控件占位文案。 */
-    placeholder?: string | (() => string);
-    /** 日期范围起始值 key。 */
-    startKey?: string;
-    /** 日期范围结束值 key。 */
-    endKey?: string;
-    /** 新建记录时使用的默认值。 */
-    defaultValue?: unknown;
-    /** 字段排序权重，数值越小越靠前。 */
-    order?: number;
-};
+type FieldDef = CrudFieldDef;
 /** CrudPage 使用的异步资源操作集合。 */
 type CrudApi = {
     /** 获取当前分页、筛选和排序结果。 */

package/dist/components/scenes/crud/crud-controller.svelte.d.ts

@@ -13,6 +13,7 @@
  * @module crud-controller
  */
 import type { PaginatedResult } from '@h-ai/core';
+import type { FormColSpan } from '../../../types.js';
 import type { NavAdapter } from './nav-adapter.js';
 /** 字段展示形式；与 `CrudEditPanel` / `CrudFilterBar` 支持的类型对齐，保留 `string` 以兼容 `@h-ai/kit`。 */
 export type CrudFieldType = 'text' | 'string' | 'textarea' | 'select' | 'radio' | 'multi-select' | 'boolean' | 'checkbox' | 'email' | 'url' | 'tel' | 'password' | 'number' | 'date' | 'datetime' | 'date-range' | 'custom';
@@ -51,8 +52,10 @@ export interface CrudFieldDef {
         min?: number;
         max?: number;
         pattern?: string;
-        message?: string;
+        message?: CrudText;
     };
+    /** 表单占用列数，默认 auto；多行文本、多选等自动占两列。 */
+    colSpan?: FormColSpan;
     /** 列宽（CSS）。 */
     width?: string;
     /** 列对齐。 */

package/dist/components/scenes/crud/crud-form-validation.d.ts

@@ -0,0 +1,4 @@
+/** CRUD 客户端字段校验；仅返回消息键，避免错误文案锁定在提交时的语言。 */
+import type { FormValidationIssue } from '../../../internal/form-validation.svelte.js';
+import type { CrudFieldDef } from './crud-controller.svelte.js';
+export declare function getCrudValidationIssue(field: CrudFieldDef, value: unknown): FormValidationIssue | undefined;

package/dist/components/scenes/crud/crud-form-validation.js

@@ -0,0 +1,39 @@
+export function getCrudValidationIssue(field, value) {
+    const rules = field.validation;
+    const empty = value === undefined || value === null || (typeof value === 'string' && !value.trim()) || (Array.isArray(value) && value.length === 0);
+    if (rules?.required && (empty || (value === false && (field.type === 'boolean' || field.type === 'checkbox'))))
+        return { key: 'form_required' };
+    if (empty)
+        return undefined;
+    if (field.type === 'number') {
+        const number = typeof value === 'number' ? value : Number(value);
+        if (!Number.isFinite(number))
+            return { key: 'form_number' };
+        if (rules?.min !== undefined && number < rules.min)
+            return { key: 'form_min', params: { min: rules.min } };
+        if (rules?.max !== undefined && number > rules.max)
+            return { key: 'form_max', params: { max: rules.max } };
+    }
+    else if (typeof value === 'string') {
+        if (rules?.min !== undefined && value.length < rules.min)
+            return { key: 'form_min_length', params: { min: rules.min } };
+        if (rules?.max !== undefined && value.length > rules.max)
+            return { key: 'form_max_length', params: { max: rules.max } };
+    }
+    if (field.type === 'email' && !/^[\w.!#$%&'*+/=?^`{|}~-]+@[a-z\d](?:[a-z\d-]*[a-z\d])?(?:\.[a-z\d](?:[a-z\d-]*[a-z\d])?)*$/i.test(String(value)))
+        return { key: 'form_email' };
+    if (field.type === 'url') {
+        if (!URL.canParse(String(value)))
+            return { key: 'form_url' };
+    }
+    if (rules?.pattern) {
+        try {
+            if (!new RegExp(`^(?:${rules.pattern})$`, 'v').test(String(value)))
+                return { key: 'form_pattern' };
+        }
+        catch {
+            return { key: 'form_pattern' };
+        }
+    }
+    return undefined;
+}

package/dist/components/scenes/crud/crud-types.d.ts

@@ -5,7 +5,8 @@
  * @module crud-types
  */
 import type { Snippet } from 'svelte';
-import type { DataAttributes, Size } from '../../../types.js';
+import type { DataAttributes, FormLayoutOptions, Size } from '../../../types.js';
+import type { CrudFieldDef } from './crud-controller.svelte.js';
 /** CrudPage 权限控制 */
 export interface CrudPermissions {
     /** 允许新建 */
@@ -20,7 +21,7 @@ export type CrudFormVariant = 'drawer' | 'modal';
 /** 列表显示密度 */
 export type CrudDensity = 'normal' | 'compact';
 /** 新建/编辑表单展示配置 */
-export interface CrudFormConfig {
+export interface CrudFormConfig extends FormLayoutOptions {
     /** 展示形式：'drawer'（抽屉，默认）或 'modal'（弹出窗口） */
     variant?: CrudFormVariant;
     /** 抽屉尺寸预设（variant='drawer'，默认 '2xl'） */
@@ -69,41 +70,7 @@ export interface CrudPageProps<T = Record<string, unknown>> extends DataAttribut
             name: string;
             label: string | (() => string);
             keyField?: string;
-            fields: Array<{
-                id: string;
-                label: string | (() => string);
-                type: string;
-                inList?: boolean;
-                filterable?: boolean;
-                readonly?: boolean;
-                inCreate?: boolean;
-                inEdit?: boolean;
-                inDetail?: boolean;
-                options?: Array<{
-                    label: string;
-                    value: string | number | boolean;
-                }> | (() => Array<{
-                    label: string;
-                    value: string | number | boolean;
-                }>);
-                validation?: {
-                    required?: boolean;
-                    min?: number;
-                    max?: number;
-                    pattern?: string;
-                    message?: string;
-                };
-                width?: string;
-                align?: 'left' | 'center' | 'right';
-                render?: (value: unknown, item: Record<string, unknown>) => string;
-                placeholder?: string | (() => string);
-                /** 日期范围起始值 key；默认 `${id}Start`。 */
-                startKey?: string;
-                /** 日期范围结束值 key；默认 `${id}End`。 */
-                endKey?: string;
-                defaultValue?: unknown;
-                order?: number;
-            }>;
+            fields: CrudFieldDef[];
             defaultPageSize?: number;
             searchable?: boolean;
             searchPlaceholder?: string | (() => string);
@@ -120,11 +87,11 @@ export interface CrudPageProps<T = Record<string, unknown>> extends DataAttribut
                 remove?: (id: string) => Promise<void>;
             };
         };
-        getListFields: () => Array<Record<string, unknown>>;
-        getFilterFields: () => Array<Record<string, unknown>>;
-        getCreateFields: () => Array<Record<string, unknown>>;
-        getEditFields: () => Array<Record<string, unknown>>;
-        getDetailFields: () => Array<Record<string, unknown>>;
+        getListFields: () => CrudFieldDef[];
+        getFilterFields: () => CrudFieldDef[];
+        getCreateFields: () => CrudFieldDef[];
+        getEditFields: () => CrudFieldDef[];
+        getDetailFields: () => CrudFieldDef[];
         toTableColumns: () => Array<{
             key: string;
             label: string;

package/dist/components/scenes/iam/AuthPanel.svelte

@@ -1,6 +1,7 @@
 <!-- 配置驱动认证场景；网络、通知及 Token 存储由 actions 注入。 -->
 <script lang='ts'>
-  import type { HaiResult } from '@h-ai/core'
+  import type { HaiError, HaiResult } from '@h-ai/core'
+  import type { UIMessageKey } from '../../../messages.js'
   import type { AuthLoginMethod, AuthPanelMode, AuthPanelProps } from '../types.js'
   import { onMount, untrack } from 'svelte'
   import { uiM } from '../../../messages.js'
@@ -16,12 +17,14 @@
   import RegisterForm from './RegisterForm.svelte'
   import ResetPasswordForm from './ResetPasswordForm.svelte'
 
-  const { config, actions, initialMode = 'login', resetToken = '', loginUrl, registerUrl, forgotPasswordUrl, onauthenticated, error = '', onretry, loginHeader, loginFields, loginFooter, registerHeader, registerFields, registerFooter, ...restProps }: AuthPanelProps = $props()
+  const { config, actions, columns = 1, labelPosition = 'top', labelWidth = '8rem', initialMode = 'login', resetToken = '', loginUrl, registerUrl, forgotPasswordUrl, onauthenticated, error = '', onretry, loginHeader, loginFields, loginFooter, registerHeader, registerFields, registerFooter, ...restProps }: AuthPanelProps = $props()
   const dataAttributes = $derived(getDataAttributes(restProps))
   let mode = $state<AuthPanelMode>(untrack(() => initialMode))
   let loading = $state(false)
-  let errors = $state<Record<string, string>>({})
-  let notice = $state('')
+  let actionError = $state<Pick<HaiError, 'code' | 'message'>>()
+  let networkFailed = $state(false)
+  const errors = $derived<Record<string, string>>(actionError ? { general: authErrorMessage(actionError) } : networkFailed ? { general: uiM('auth_network_error') } : {})
+  let notice = $state<UIMessageKey | ''>('')
   // SSR 表单先显示但不可编辑；客户端绑定事件后开放输入，避免接管时丢失早到的输入。
   let interactive = $state(false)
   onMount(() => {
@@ -33,13 +36,15 @@
 
   function switchMode(next: AuthPanelMode) {
     mode = next
-    errors = {}
+    actionError = undefined
+    networkFailed = false
     notice = ''
   }
-  async function run(operation: () => Promise<HaiResult<unknown>>, authenticate = false, successNotice = '') {
+  async function run(operation: () => Promise<HaiResult<unknown>>, authenticate = false, successNotice: UIMessageKey | '' = '') {
     if (loading)
       return
-    errors = {}
+    actionError = undefined
+    networkFailed = false
     notice = ''
     loading = true
     try {
@@ -48,10 +53,10 @@
         if (mode === 'register' && result.error.code === 'hai:iam:004') {
           // 默认禁用的新账户已完成注册，提示等待启用，避免用户重复注册。
           switchMode('login')
-          notice = uiM('auth_registration_pending')
+          notice = 'auth_registration_pending'
         }
         else {
-          errors = { general: authErrorMessage(result.error) }
+          actionError = result.error
         }
       }
       else if (authenticate) {
@@ -61,7 +66,7 @@
         notice = successNotice
       }
     }
-    catch { errors = { general: uiM('auth_network_error') } }
+    catch { networkFailed = true }
     finally { loading = false }
   }
 </script>
@@ -80,44 +85,47 @@
 
 <AuthShell {...dataAttributes} {...config?.ui} title={config?.ui.title || title} brandTitle={config?.ui.brandTitle || uiM('auth_brand')}>
   <fieldset class='m-0 min-w-0 border-0 p-0' disabled={!interactive}>
-    {#if error}
-      <Alert variant='error'>{error}</Alert>
-      {#if onretry}<Button class='mt-4 w-full' onclick={onretry}>{uiM('crud_retry')}</Button>{/if}
-    {:else if !config}
-      <div class='flex justify-center' role='status'><Spinner /></div>
-    {:else if !available}
-      <Alert variant='warning'>{uiM('auth_unavailable')}</Alert>
-      <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
-    {:else}
-      {#if notice}<Alert variant='success' class='mb-4'>{notice}</Alert>{/if}
-      {#if mode === 'login'}
-        <LoginForm {methods} {loading} {errors} header={loginHeader} extraFields={loginFields} showRememberMe={false} showForgotPassword={config.passwordReset.enabled} {forgotPasswordUrl}
-                   onforgotpassword={forgotPasswordUrl ? undefined : () => switchMode('forgot')}
-                   otpLength={config.otp.length} resendInterval={config.otp.resendInterval} onsendotp={actions.sendOtp}
-                   agreements={config.agreements.showOnLogin ? config.agreements : undefined}
-                   onsubmit={data => run(() => actions.login({ identifier: data.username, password: data.password, method: data.method, code: data.code }), true)}>
-          {#snippet footer()}
-            {#if loginFooter}{@render loginFooter()}{/if}
-            {#if config?.register.enabled}<div class='text-center text-sm'>{uiM('login_no_account')} {@render link('register', uiM('login_register_now'), registerUrl)}</div>{/if}
-          {/snippet}
-        </LoginForm>
-      {:else if mode === 'register'}
-        <RegisterForm {loading} {errors} header={registerHeader} extraFields={registerFields} fields={config.passwordReset.mode === 'phone' ? ['username', 'phone', 'password'] : ['username', 'email', 'password']} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
-                      agreements={config.agreements.showOnRegister ? config.agreements : undefined} onsubmit={data => run(() => actions.register({ username: data.username || '', password: data.password, email: data.email, phone: data.phone, displayName: data.nickname }), true)}>
-          {#snippet footer()}
-            {#if registerFooter}{@render registerFooter()}{/if}
-            <div class='text-center'>{@render link('login', uiM('register_login_now'), loginUrl)}</div>
-          {/snippet}
-        </RegisterForm>
-      {:else if mode === 'forgot'}
-        <ForgotPasswordForm {loading} {errors} mode={config.passwordReset.mode ?? 'email'} onsubmit={data => run(() => actions.requestPasswordReset(data.email || data.phone || ''), false, uiM('auth_reset_sent'))}>
-          {#snippet footer()}<div class='flex justify-between gap-3'>{@render link('login', uiM('login_submit'), loginUrl)}{@render link('reset', uiM('auth_have_token'))}</div>{/snippet}
-        </ForgotPasswordForm>
-      {:else}
-        <ResetPasswordForm {loading} {errors} showCode={!resetToken} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
-                           onsubmit={data => run(() => actions.confirmPasswordReset(resetToken || data.code || '', data.newPassword), false, uiM('auth_reset_done'))} />
+    <!-- 固定内容包装节点，避免 fieldset 插入通知时丢失容器查询子树的布局。 -->
+    <div class='min-w-0'>
+      {#if error}
+        <Alert variant='error'>{error}</Alert>
+        {#if onretry}<Button class='mt-4 w-full' onclick={onretry}>{uiM('crud_retry')}</Button>{/if}
+      {:else if !config}
+        <div class='flex justify-center' role='status'><Spinner /></div>
+      {:else if !available}
+        <Alert variant='warning'>{uiM('auth_unavailable')}</Alert>
         <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+      {:else}
+        {#if notice}<Alert variant='success' class='mb-4'>{uiM(notice)}</Alert>{/if}
+        {#if mode === 'login'}
+          <LoginForm {columns} {labelPosition} {labelWidth} {methods} {loading} {errors} header={loginHeader} extraFields={loginFields} showRememberMe={false} showForgotPassword={config.passwordReset.enabled} {forgotPasswordUrl}
+                     onforgotpassword={forgotPasswordUrl ? undefined : () => switchMode('forgot')}
+                     otpLength={config.otp.length} resendInterval={config.otp.resendInterval} onsendotp={actions.sendOtp}
+                     agreements={config.agreements.showOnLogin ? config.agreements : undefined}
+                     onsubmit={data => run(() => actions.login({ identifier: data.username, password: data.password, method: data.method, code: data.code }), true)}>
+            {#snippet footer()}
+              {#if loginFooter}{@render loginFooter()}{/if}
+              {#if config?.register.enabled}<div class='text-center text-sm'>{uiM('login_no_account')} {@render link('register', uiM('login_register_now'), registerUrl)}</div>{/if}
+            {/snippet}
+          </LoginForm>
+        {:else if mode === 'register'}
+          <RegisterForm {columns} {labelPosition} {labelWidth} {loading} {errors} header={registerHeader} extraFields={registerFields} fields={config.passwordReset.mode === 'phone' ? ['username', 'phone', 'password'] : ['username', 'email', 'password']} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                        agreements={config.agreements.showOnRegister ? config.agreements : undefined} onsubmit={data => run(() => actions.register({ username: data.username || '', password: data.password, email: data.email, phone: data.phone, displayName: data.nickname }), true)}>
+            {#snippet footer()}
+              {#if registerFooter}{@render registerFooter()}{/if}
+              <div class='text-center'>{@render link('login', uiM('register_login_now'), loginUrl)}</div>
+            {/snippet}
+          </RegisterForm>
+        {:else if mode === 'forgot'}
+          <ForgotPasswordForm {columns} {labelPosition} {labelWidth} {loading} {errors} mode={config.passwordReset.mode ?? 'email'} onsubmit={data => run(() => actions.requestPasswordReset(data.email || data.phone || ''), false, 'auth_reset_sent')}>
+            {#snippet footer()}<div class='flex justify-between gap-3'>{@render link('login', uiM('login_submit'), loginUrl)}{@render link('reset', uiM('auth_have_token'))}</div>{/snippet}
+          </ForgotPasswordForm>
+        {:else}
+          <ResetPasswordForm {columns} {labelPosition} {labelWidth} {loading} {errors} showCode={!resetToken} passwordPolicy={config.password} minPasswordLength={config.password.minLength}
+                             onsubmit={data => run(() => actions.confirmPasswordReset(resetToken || data.code || '', data.newPassword), false, 'auth_reset_done')} />
+          <div class='mt-4 text-center'>{@render link('login', uiM('login_submit'), loginUrl)}</div>
+        {/if}
       {/if}
-    {/if}
+    </div>
   </fieldset>
 </AuthShell>

package/dist/components/scenes/iam/ChangePasswordForm.svelte

@@ -8,12 +8,17 @@
   import { uiM } from '../../../messages.js'
   import { cn, getDataAttributes } from '../../../utils.js'
   import Alert from '../../compounds/Alert.svelte'
+  import FormField from '../../compounds/FormField.svelte'
+  import FormLayout from '../../compounds/FormLayout.svelte'
   import Button from '../../primitives/Button.svelte'
   import { arePasswordsEqual, passwordPolicyError, passwordPolicyHint } from './password-utils.js'
   import PasswordInput from './PasswordInput.svelte'
 
   const {
     loading = false,
+    columns = 1,
+    labelPosition = 'top',
+    labelWidth = '8rem',
     disabled = false,
     requireOldPassword = true,
     showPasswordStrength = true,
@@ -73,71 +78,64 @@
 </script>
 
 <form {...dataAttributes} class={formClass} onsubmit={handleSubmit}>
-  {#if requireOldPassword}
-    <div class='space-y-1.5'>
-      <label class='text-sm font-medium text-base-content/70' for='old-password'>
-        {uiM('change_password_old')}
-      </label>
+  <FormLayout {columns} {labelPosition} {labelWidth}>
+    {#if requireOldPassword}
+      <FormField for='old-password' label={uiM('change_password_old')}>
+        <PasswordInput
+          value={oldPassword}
+          oninput={(e) => { oldPassword = e.currentTarget.value }}
+          placeholder={uiM('change_password_old_placeholder')}
+          {disabled}
+          error={errors.oldPassword}
+          showStrength={false}
+        />
+      </FormField>
+    {/if}
+
+    <FormField for='new-password' label={uiM('change_password_new')}>
       <PasswordInput
-        value={oldPassword}
-        oninput={(e) => { oldPassword = e.currentTarget.value }}
-        placeholder={uiM('change_password_old_placeholder')}
+        value={newPassword}
+        oninput={(e) => { newPassword = e.currentTarget.value }}
+        placeholder={uiM('change_password_new_placeholder')}
         {disabled}
-        error={errors.oldPassword}
-        showStrength={false}
+        error={errors.newPassword}
+        showStrength={showPasswordStrength}
+        minLength={minPasswordLength}
       />
-    </div>
-  {/if}
+    </FormField>
 
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='new-password'>
-      {uiM('change_password_new')}
-    </label>
-    <PasswordInput
-      value={newPassword}
-      oninput={(e) => { newPassword = e.currentTarget.value }}
-      placeholder={uiM('change_password_new_placeholder')}
-      {disabled}
-      error={errors.newPassword}
-      showStrength={showPasswordStrength}
-      minLength={minPasswordLength}
-    />
-  </div>
-
-  <div class='space-y-1.5'>
-    <label class='text-sm font-medium text-base-content/70' for='confirm-password'>
-      {uiM('change_password_confirm')}
-    </label>
-    <PasswordInput
-      value={confirmPassword}
-      oninput={(e) => { confirmPassword = e.currentTarget.value }}
-      placeholder={uiM('change_password_confirm_placeholder')}
-      {disabled}
-      error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('change_password_mismatch') : '')}
-      showStrength={false}
-    />
-  </div>
+    <FormField for='confirm-password' label={uiM('change_password_confirm')}>
+      <PasswordInput
+        value={confirmPassword}
+        oninput={(e) => { confirmPassword = e.currentTarget.value }}
+        placeholder={uiM('change_password_confirm_placeholder')}
+        {disabled}
+        error={errors.confirmPassword || (!passwordsMatch && confirmPassword ? uiM('change_password_mismatch') : '')}
+        showStrength={false}
+      />
+    </FormField>
 
-  <div class='rounded-lg bg-base-content/3 px-3.5 py-2.5 text-xs text-base-content/50'>
-    {uiM('change_password_relogin_hint')}
-  </div>
+    <div class='rounded-lg bg-base-content/3 px-3.5 py-2.5 text-xs text-base-content/50'>
+      {uiM('change_password_relogin_hint')}
+    </div>
 
-  {#if errors.general}
-    <Alert variant='error'>
-      {errors.general}
-    </Alert>
-  {/if}
+    {#if errors.general}
+      <Alert variant='error'>
+        {errors.general}
+      </Alert>
+    {/if}
 
-  {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
-  {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
+    {#if passwordPolicy}<p class='text-xs text-base-content/60'>{passwordPolicyHint(passwordPolicy)}</p>{/if}
+    {#if policyError}<p role='alert' class='text-sm text-error'>{policyError}</p>{/if}
 
-  <Button
-    type='submit'
-    variant='primary'
-    class='w-full sm:w-auto sm:min-w-40'
-    disabled={loading || disabled || !canSubmit || Boolean(policyError)}
-    {loading}
-  >
-    {submitText || uiM('change_password_submit')}
-  </Button>
+    <Button
+      type='submit'
+      variant='primary'
+      class='w-full sm:w-auto sm:min-w-40'
+      disabled={loading || disabled || !canSubmit || Boolean(policyError)}
+      {loading}
+    >
+      {submitText || uiM('change_password_submit')}
+    </Button>
+  </FormLayout>
 </form>