Alex-Devera/3x-ui
1
0
Fork 0
mirror of https://github.com/MHSanaei/3x-ui.git synced 2026-05-13 09:36:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

fix(ui): correct responsive breakpoints for inbound form and settings

Browse source 
InboundFormModal forms specified label/wrapper cols only at md
(>=768), leaving 576-767 unset and breaking the grid in that range.
Move the breakpoint down to sm so the desktop 8/14 split applies
from 576 upward.

SettingListItem had its breakpoints inverted: at <992 no span was
set so the meta and control cols squeezed side-by-side, and at lg
(992-1199) they stacked. Switch to xs/lg so input stacks below the
text under 992 and sits beside it from 992 upward.
This commit is contained in:
MHSanaei 2026-05-10 00:43:25 +02:00
parent 9735d26b3d
commit 1478124712
No known key found for this signature in database
GPG key ID: 7E4060F2FBE5AB7A
2 changed files with 16 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
frontend/src/components/SettingListItem.vue
View file

@ -17,13 +17,13 @@ const padding = computed(() =>
<template>
<a-list-item :style="{ padding }">
<a-row :gutter="[8, 16]">
<a-col :lg="24" :xl="12">
<a-col :xs="24" :lg="12">
<a-list-item-meta>
<template #title><slot name="title" /></template>
<template #description><slot name="description" /></template>
</a-list-item-meta>
</a-col>
<a-col :lg="24" :xl="12">
<a-col :xs="24" :lg="12">
<slot name="control" />
</a-col>
</a-row>

28
frontend/src/pages/inbounds/InboundFormModal.vue
View file

@ -552,7 +552,7 @@ watch(
<a-tabs v-if="inbound && dbForm" default-active-key="basic">
<!-- ============================== BASICS ============================== -->
<a-tab-pane key="basic" :tab="t('pages.xray.basicTemplate')">
<a-form :colon="false" :label-col="{ md: { span: 8 } }" :wrapper-col="{ md: { span: 14 } }">
<a-form :colon="false" :label-col="{ sm: { span: 8 } }" :wrapper-col="{ sm: { span: 14 } }">
<a-form-item :label="t('enable')">
<a-switch v-model:checked="dbForm.enable" />
</a-form-item>
@ -621,7 +621,7 @@ watch(
<template v-if="isMultiUser">
<a-collapse v-if="mode === 'add' && firstClient" default-active-key="0">
<a-collapse-panel key="0" header="Client">
<a-form :colon="false" :label-col="{ md: { span: 8 } }" :wrapper-col="{ md: { span: 14 } }">
<a-form :colon="false" :label-col="{ sm: { span: 8 } }" :wrapper-col="{ sm: { span: 14 } }">
<a-form-item label="Enable">
<a-switch v-model:checked="firstClient.enable" />
</a-form-item>
@ -729,8 +729,8 @@ watch(
</template>
<!-- VLess decryption / encryption -->
<a-form v-if="protocol === Protocols.VLESS" :colon="false" :label-col="{ md: { span: 8 } }"
:wrapper-col="{ md: { span: 14 } }" class="mt-12">
<a-form v-if="protocol === Protocols.VLESS" :colon="false" :label-col="{ sm: { span: 8 } }"
:wrapper-col="{ sm: { span: 14 } }" class="mt-12">
<a-form-item label="Decryption">
<a-input v-model:value="inbound.settings.decryption" />
</a-form-item>
@ -751,8 +751,8 @@ watch(
</a-form>
<!-- Shadowsocks shared fields (method/network/ivCheck) -->
<a-form v-if="protocol === Protocols.SHADOWSOCKS" :colon="false" :label-col="{ md: { span: 8 } }"
:wrapper-col="{ md: { span: 14 } }" class="mt-12">
<a-form v-if="protocol === Protocols.SHADOWSOCKS" :colon="false" :label-col="{ sm: { span: 8 } }"
:wrapper-col="{ sm: { span: 14 } }" class="mt-12">
<a-form-item label="Encryption method">
<a-select v-model:value="inbound.settings.method" @change="onSSMethodChange">
<a-select-option v-for="(m, k) in SSMethods" :key="k" :value="m">{{ k }}</a-select-option>
@ -779,7 +779,7 @@ watch(
<!-- HTTP / Mixed accounts -->
<a-form v-if="protocol === Protocols.HTTP || protocol === Protocols.MIXED" :colon="false"
:label-col="{ md: { span: 8 } }" :wrapper-col="{ md: { span: 14 } }" class="mt-12">
:label-col="{ sm: { span: 8 } }" :wrapper-col="{ sm: { span: 14 } }" class="mt-12">
<a-form-item label="Accounts">
<a-button size="small" @click="protocol === Protocols.HTTP
? inbound.settings.addAccount(new Inbound.HttpSettings.HttpAccount())
@ -823,8 +823,8 @@ watch(
</a-form>
<!-- Tunnel -->
<a-form v-if="protocol === Protocols.TUNNEL" :colon="false" :label-col="{ md: { span: 8 } }"
:wrapper-col="{ md: { span: 14 } }" class="mt-12">
<a-form v-if="protocol === Protocols.TUNNEL" :colon="false" :label-col="{ sm: { span: 8 } }"
:wrapper-col="{ sm: { span: 14 } }" class="mt-12">
<a-form-item label="Address">
<a-input v-model:value="inbound.settings.address" />
</a-form-item>
@ -844,8 +844,8 @@ watch(
</a-form>
<!-- WireGuard -->
<a-form v-if="protocol === Protocols.WIREGUARD" :colon="false" :label-col="{ md: { span: 8 } }"
:wrapper-col="{ md: { span: 14 } }" class="mt-12">
<a-form v-if="protocol === Protocols.WIREGUARD" :colon="false" :label-col="{ sm: { span: 8 } }"
:wrapper-col="{ sm: { span: 14 } }" class="mt-12">
<a-form-item>
<template #label>
Secret key
@ -930,7 +930,7 @@ watch(
</div>
<a-form v-for="(fallback, idx) in inbound.settings.fallbacks" :key="idx" :colon="false"
:label-col="{ md: { span: 8 } }" :wrapper-col="{ md: { span: 14 } }">
:label-col="{ sm: { span: 8 } }" :wrapper-col="{ sm: { span: 14 } }">
<a-divider style="margin: 0">
Fallback {{ idx + 1 }}
<DeleteOutlined class="danger-icon" @click="delFallback(idx)" />
@ -1001,7 +1001,7 @@ watch(
<!-- ============================== STREAM ============================== -->
<a-tab-pane v-if="canEnableStream" key="stream"
tab="Stream"><!-- "Stream" stays literal — it's a wire-format identifier -->
<a-form :colon="false" :label-col="{ md: { span: 8 } }" :wrapper-col="{ md: { span: 14 } }">
<a-form :colon="false" :label-col="{ sm: { span: 8 } }" :wrapper-col="{ sm: { span: 14 } }">
<a-form-item v-if="protocol !== Protocols.HYSTERIA" label="Transmission">
<a-select v-model:value="network" :style="{ width: '75%' }">
<a-select-option value="tcp">TCP (RAW)</a-select-option>
@ -1660,7 +1660,7 @@ watch(
<!-- ============================== SNIFFING ============================== -->
<a-tab-pane key="sniffing" tab="Sniffing"><!-- "Sniffing" stays literal — xray config term -->
<a-form :colon="false" :label-col="{ md: { span: 8 } }" :wrapper-col="{ md: { span: 14 } }">
<a-form :colon="false" :label-col="{ sm: { span: 8 } }" :wrapper-col="{ sm: { span: 14 } }">
<a-form-item label="Enabled">
<a-switch v-model:checked="inbound.sniffing.enabled" />
</a-form-item>