fix(clients): balance renewal form layout and mode guidance (#6672)

* fix(clients): balance renewal form layout and mode guidance

Move renewal out of the traffic-reset half-column so its help and preview
no longer leave a tall empty area beside the reset selector. Keep the
mode, active schedule field and renewal limit in equal desktop columns,
stack them on small screens, and preserve the bulk form's stacked layout.
Keep monthly traffic-reset controls together in their own row and allow
the first-cutoff button to wrap without shrinking its click target.

Show fixed-duration guidance only for interval renewal and the month-end
boundary note only for monthly renewal. Synchronize all thirteen locales
and the client docs, remove obsolete zero-value mode-switching tooltips,
and cover the help transitions through the real client form.

Keep preview markup and existing monthly copy intact so the independent
date-display work in #6662 can merge without overlapping these edits.

This is presentation-only: saved values, expiry selection, renewal and
traffic-reset calculations, APIs and database formats are unchanged.

* refactor(clients): drop the renewal CSS that #6662 made redundant

#6662 landed the full-width preview Space and the wrapping first-cutoff
Button as inline styles, so ClientRenewalFields.css and its wrapper div
styled the same two elements a second time; both are removed.

* test(tuic): wait for downstream association activity refresh

The UDP lifecycle regression can receive its QUIC response before the
server's sending goroutine updates the association timestamp. Reading
the protected field once then mistakes a valid scheduling order for a
missing refresh, intermittently failing the race-enabled CI job.

Wait for lastActive to advance under the registry mutex, bounded by a
one-second deadline, before checking idle reaping. Retain the payload,
association ID, idle-survival and shutdown assertions so a missing
activity update still fails the test.

This only changes test synchronization. Production relay behavior,
renewal logic, network timeouts and CI configuration remain unchanged.

---------

Co-authored-by: JacktheRanger <219502738+JacktheRanger@users.noreply.github.com>
Co-authored-by: MHSanaei <ho3ein.sanaei@gmail.com>

frontend/src/pages/clients/ClientFormModal.tsx

@@ -989,7 +989,9 @@ export default function ClientFormModal({
                               }))}
                             />
                           </FormField>
-                          {trafficReset === 'monthly' && (
+                        </Col>
+                        {trafficReset === 'monthly' && (
+                          <Col xs={24} md={12}>
                             <FormField
                               name="trafficResetDay"
                               label={t('pages.inbounds.periodicTrafficResetDay')}
@@ -997,21 +999,18 @@ export default function ClientFormModal({
                             >
                               <InputNumber min={1} max={31} style={{ width: '100%' }} />
                             </FormField>
-                          )}
-                        </Col>
-                        <Col xs={24} md={12}>
-                          <ClientRenewalFields
-                            active={open}
-                            delayedStart={delayedStart}
-                            expiryTime={
-                              delayedStart ? -86400000 * (delayedDays || 0) : expiryDate || 0
-                            }
-                            resetCount={client?.traffic?.resetCount || 0}
-                            setExpiry={(expiry) => methods.setValue('expiryDate', expiry)}
-                          />
-                        </Col>
+                          </Col>
+                        )}
                       </Row>
 
+                      <ClientRenewalFields
+                        active={open}
+                        delayedStart={delayedStart}
+                        expiryTime={delayedStart ? -86400000 * (delayedDays || 0) : expiryDate || 0}
+                        resetCount={client?.traffic?.resetCount || 0}
+                        setExpiry={(expiry) => methods.setValue('expiryDate', expiry)}
+                      />
+
                       <Row gutter={16}>
                         <Col xs={24} md={12}>
                           <FormField name="comment" label={t('pages.clients.comment')}>

frontend/src/pages/clients/ClientRenewalFields.tsx

@@ -2,7 +2,7 @@ import { useEffect, useId, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useQuery } from '@tanstack/react-query';
-import { Button, Form, InputNumber, Select, Space, Typography } from 'antd';
+import { Button, Col, Form, InputNumber, Row, Select, Space, Typography } from 'antd';
 
 import { FormField } from '@/components/form/rhf';
 import { ClientRenewalPreviewSchema } from '@/generated/zod';
@@ -91,67 +91,89 @@ export default function ClientRenewalFields({
   }
   return (
     <>
-      <Form.Item label={t('pages.clients.renewMode')} htmlFor={modeId}>
-        <Select
-          id={modeId}
-          value={mode}
-          onChange={changeMode}
-          options={[
-            { value: 'none', label: t('pages.clients.renewModeNone') },
-            { value: 'interval', label: t('pages.clients.renewModeInterval') },
-            { value: 'weekly', label: t('pages.clients.renewModeWeekly') },
-            { value: 'monthly', label: t('pages.clients.renewModeMonthly') },
-          ]}
-        />
-      </Form.Item>
-      {mode === 'interval' && (
-        <FormField
-          name="reset"
-          label={bulk ? t('pages.clients.renew') : t('pages.clients.renewDays')}
-          tooltip={t('pages.clients.renewDesc')}
-          transform={{ output: (v) => Number(v) || 1 }}
-        >
-          <InputNumber id={'client-renewal-interval-' + formId} min={1} style={{ width: '100%' }} />
-        </FormField>
-      )}
-      {mode === 'monthly' && (
-        <FormField
-          name="resetDay"
-          label={t('pages.clients.renewOnDay')}
-          tooltip={t('pages.clients.renewOnDayDesc')}
-          transform={{ output: (v) => Number(v) || 1 }}
-        >
-          <InputNumber
-            id={'client-renewal-day-' + formId}
-            min={1}
-            max={31}
-            style={{ width: '100%' }}
-          />
-        </FormField>
-      )}
-      {mode === 'weekly' && (
-        <FormField name="resetWeekday" label={t('pages.clients.renewWeekday')}>
-          <Select
-            id={'client-renewal-weekday-' + formId}
-            options={Array.from({ length: 7 }, (_, i) => ({
-              value: i + 1,
-              label: weekdayFormatter.format(new Date(Date.UTC(2026, 0, i + 5))),
-            }))}
-          />
-        </FormField>
-      )}
+      <Row gutter={16}>
+        <Col xs={24} md={bulk ? 24 : 8}>
+          <Form.Item label={t('pages.clients.renewMode')} htmlFor={modeId}>
+            <Select
+              id={modeId}
+              value={mode}
+              onChange={changeMode}
+              options={[
+                { value: 'none', label: t('pages.clients.renewModeNone') },
+                { value: 'interval', label: t('pages.clients.renewModeInterval') },
+                { value: 'weekly', label: t('pages.clients.renewModeWeekly') },
+                { value: 'monthly', label: t('pages.clients.renewModeMonthly') },
+              ]}
+            />
+          </Form.Item>
+        </Col>
+        {mode === 'interval' && (
+          <Col xs={24} md={bulk ? 24 : 8}>
+            <FormField
+              name="reset"
+              label={bulk ? t('pages.clients.renew') : t('pages.clients.renewDays')}
+              tooltip={t('pages.clients.renewDesc')}
+              transform={{ output: (v) => Number(v) || 1 }}
+            >
+              <InputNumber
+                id={'client-renewal-interval-' + formId}
+                min={1}
+                style={{ width: '100%' }}
+              />
+            </FormField>
+          </Col>
+        )}
+        {mode === 'monthly' && (
+          <Col xs={24} md={bulk ? 24 : 8}>
+            <FormField
+              name="resetDay"
+              label={t('pages.clients.renewOnDay')}
+              tooltip={t('pages.clients.renewOnDayDesc')}
+              transform={{ output: (v) => Number(v) || 1 }}
+            >
+              <InputNumber
+                id={'client-renewal-day-' + formId}
+                min={1}
+                max={31}
+                style={{ width: '100%' }}
+              />
+            </FormField>
+          </Col>
+        )}
+        {mode === 'weekly' && (
+          <Col xs={24} md={bulk ? 24 : 8}>
+            <FormField name="resetWeekday" label={t('pages.clients.renewWeekday')}>
+              <Select
+                id={'client-renewal-weekday-' + formId}
+                options={Array.from({ length: 7 }, (_, i) => ({
+                  value: i + 1,
+                  label: weekdayFormatter.format(new Date(Date.UTC(2026, 0, i + 5))),
+                }))}
+              />
+            </FormField>
+          </Col>
+        )}
+        {mode !== 'none' && (
+          <Col xs={24} md={bulk ? 24 : 8}>
+            <FormField
+              name="resetMax"
+              label={t('pages.clients.renewMax')}
+              tooltip={t('pages.clients.renewMaxDesc')}
+              transform={{ output: (v) => Number(v) || 0 }}
+            >
+              <InputNumber min={0} style={{ width: '100%' }} />
+            </FormField>
+          </Col>
+        )}
+      </Row>
       {mode !== 'none' && (
         <>
-          <FormField
-            name="resetMax"
-            label={t('pages.clients.renewMax')}
-            tooltip={t('pages.clients.renewMaxDesc')}
-            transform={{ output: (v) => Number(v) || 0 }}
-          >
-            <InputNumber min={0} style={{ width: '100%' }} />
-          </FormField>
           <Typography.Paragraph type="secondary">
-            {t('pages.clients.renewScheduleDesc')}
+            {mode === 'interval'
+              ? t('pages.clients.renewIntervalDesc')
+              : mode === 'weekly'
+                ? t('pages.clients.renewWeeklyDesc')
+                : t('pages.clients.renewScheduleDesc')}
           </Typography.Paragraph>
           {query.isError && request === debounced && (
             <Typography.Paragraph type="warning">

frontend/src/test/client-renewal-help.test.tsx

@@ -0,0 +1,42 @@
+import { expect, it } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+
+import ClientFormModal from '@/pages/clients/ClientFormModal';
+import { chooseSelectOption, renderWithProviders } from './test-utils';
+
+it('shows only the active renewal mode guidance when switching between interval, weekly, monthly, and disabled', async () => {
+  renderWithProviders(
+    <ClientFormModal
+      open
+      mode="edit"
+      client={{ email: 'layout@example.com', reset: 31, expiryTime: 1893427200000 }}
+      attachedIds={[1]}
+      inbounds={[{ id: 1, protocol: 'vless', tag: 'calendar' }]}
+      save={async () => null}
+      onOpenChange={() => {}}
+    />,
+  );
+  const mode = screen.getByLabelText('Auto renewal');
+  const interval = /Adds the configured number of 24-hour days/;
+  const calendar = /Calendar renewal uses midnight/;
+  const monthly = /Monthly day 1 means valid through/;
+
+  await waitFor(() => expect(screen.queryByText(calendar)).toBeNull());
+  expect(screen.queryByText(interval)).not.toBeNull();
+  expect(screen.queryByText(monthly)).toBeNull();
+
+  chooseSelectOption(mode.id, 'Calendar weekly');
+  expect(screen.queryByText(calendar)).not.toBeNull();
+  expect(screen.queryByText(interval)).toBeNull();
+  expect(screen.queryByText(monthly)).toBeNull();
+
+  chooseSelectOption(mode.id, 'Calendar monthly');
+  expect(screen.queryByText(calendar)).not.toBeNull();
+  expect(screen.queryByText(monthly)).not.toBeNull();
+  expect(screen.queryByText(interval)).toBeNull();
+
+  chooseSelectOption(mode.id, 'Disabled');
+  expect(screen.queryByText(calendar)).toBeNull();
+  expect(screen.queryByText(interval)).toBeNull();
+  expect(screen.queryByText(monthly)).toBeNull();
+});