fix(frontend): stack form fields on mobile in client/inbound/node modals

Replace fixed :span values with responsive :xs="24" :md="N" so form rows
collapse to a single column on narrow viewports instead of squeezing.
This commit is contained in:
MHSanaei
2026-05-21 18:54:42 +02:00
parent 3d1d75d65a
commit f2f5d584b3
3 changed files with 24 additions and 24 deletions
+7 -7
View File
@@ -117,12 +117,12 @@ async function onSave() {
:mask-closable="false" width="640px" @ok="onSave" @cancel="close">
<a-form layout="vertical" :model="form">
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.name')" required>
<a-input v-model:value="form.name" :placeholder="t('pages.nodes.namePlaceholder')" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.remark')">
<a-input v-model:value="form.remark" />
</a-form-item>
@@ -130,7 +130,7 @@ async function onSave() {
</a-row>
<a-row :gutter="16">
<a-col :span="6">
<a-col :xs="24" :md="6">
<a-form-item :label="t('pages.nodes.scheme')">
<a-select v-model:value="form.scheme">
<a-select-option value="https">https</a-select-option>
@@ -138,12 +138,12 @@ async function onSave() {
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.address')" required>
<a-input v-model:value="form.address" :placeholder="t('pages.nodes.addressPlaceholder')" />
</a-form-item>
</a-col>
<a-col :span="6">
<a-col :xs="24" :md="6">
<a-form-item :label="t('pages.nodes.port')" required>
<a-input-number v-model:value="form.port" :min="1" :max="65535" style="width: 100%" />
</a-form-item>
@@ -151,12 +151,12 @@ async function onSave() {
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.basePath')">
<a-input v-model:value="form.basePath" placeholder="/" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :xs="24" :md="12">
<a-form-item :label="t('pages.nodes.enable')">
<a-switch v-model:checked="form.enable" />
</a-form-item>