fix: constrain address management modal width (#1002)

* fix: constrain address management modal width

* fix: enable address table horizontal scroll

CHANGELOG.md

@@ -17,6 +17,7 @@
 
 ### Bug Fixes
 
+- fix: |Frontend| 收窄地址管理相关弹窗宽度，并让地址表格在弹窗内部横向滚动，避免多地址场景撑宽弹窗
 - fix: |Frontend| 修复 `/open_api/settings` 未返回 `domains` 数组时前端设置初始化直接调用 `map()` 报 `undefined` 错误的问题，统一按空数组兜底处理
 
 ### Improvements

CHANGELOG_EN.md

@@ -17,6 +17,7 @@
 
 ### Bug Fixes
 
+- fix: |Frontend| Narrow address-management modal widths and keep address tables horizontally scrollable inside the modal to prevent multi-address lists from stretching the dialog
 - fix: |Frontend| Fix the frontend settings bootstrap throwing an `undefined` error when `/open_api/settings` does not return a `domains` array by normalizing the field to an empty array before mapping it
 
 ### Improvements

frontend/src/views/admin/UserAddressManagement.vue

@@ -67,13 +67,18 @@ onMounted(async () => {
 </script>
 
 <template>
-    <div style="overflow: auto;">
+    <div class="address-table-scroll">
         <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
 </template>
 
 <style scoped>
 .n-data-table {
-    min-width: 700px;
+    min-width: 640px;
+}
+
+.address-table-scroll {
+    max-width: 100%;
+    overflow-x: auto;
 }
 </style>

frontend/src/views/admin/UserManagement.vue

@@ -344,7 +344,8 @@ onMounted(async () => {
                 </n-button>
             </template>
         </n-modal>
-        <n-modal v-model:show="showUserAddressManagement" preset="card" :title="t('userAddressManagement')">
+        <n-modal v-model:show="showUserAddressManagement" preset="card" :title="t('userAddressManagement')"
+            style="width: 720px;">
             <UserAddressManagement :user_id="curUserId" />
         </n-modal>
         <n-input-group>

frontend/src/views/index/AddressBar.vue

@@ -99,7 +99,8 @@ onMounted(async () => {
                 </n-collapse>
             </n-card>
         </n-modal>
-        <n-modal v-model:show="showAddressManage" preset="card" :title="t('addressManage')">
+        <n-modal v-model:show="showAddressManage" preset="card" :title="t('addressManage')"
+            style="width: 720px;">
             <TelegramAddress v-if="isTelegram" />
             <AddressManagement v-else-if="userJwt" />
             <LocalAddress v-else />
@@ -130,4 +131,5 @@ onMounted(async () => {
     flex: 0 0 auto;
     white-space: nowrap;
 }
+
 </style>

frontend/src/views/index/LocalAddress.vue

@@ -126,7 +126,9 @@ const columns = [
         </n-alert>
         <n-tabs type="segment" v-model:value="tabValue">
             <n-tab-pane name="address" :tab="t('address')">
-                <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+                <div class="address-table-scroll">
+                    <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+                </div>
             </n-tab-pane>
             <n-tab-pane name="create_or_bind" :tab="t('create_or_bind')">
                 <Login :bindUserAddress="bindAddress" />
@@ -134,3 +136,14 @@ const columns = [
         </n-tabs>
     </div>
 </template>
+
+<style scoped>
+.n-data-table {
+    min-width: 640px;
+}
+
+.address-table-scroll {
+    max-width: 100%;
+    overflow-x: auto;
+}
+</style>

frontend/src/views/index/TelegramAddress.vue

@@ -133,7 +133,9 @@ onMounted(async () => {
     <div>
         <n-tabs type="segment">
             <n-tab-pane name="address" :tab="t('address')">
-                <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+                <div class="address-table-scroll">
+                    <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+                </div>
             </n-tab-pane>
             <n-tab-pane name="bind" :tab="t('bind')">
                 <Login :newAddressPath="newAddressPath" :bindUserAddress="bindAddress" />
@@ -141,3 +143,14 @@ onMounted(async () => {
         </n-tabs>
     </div>
 </template>
+
+<style scoped>
+.n-data-table {
+    min-width: 640px;
+}
+
+.address-table-scroll {
+    max-width: 100%;
+    overflow-x: auto;
+}
+</style>

frontend/src/views/user/AddressManagement.vue

@@ -196,7 +196,7 @@ onMounted(async () => {
         </n-modal>
         <n-tabs type="segment">
             <n-tab-pane name="address" :tab="t('address')">
-                <div style="overflow: auto;">
+                <div class="address-table-scroll">
                     <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
                 </div>
             </n-tab-pane>
@@ -209,6 +209,11 @@ onMounted(async () => {
 
 <style scoped>
 .n-data-table {
-    min-width: 700px;
+    min-width: 640px;
+}
+
+.address-table-scroll {
+    max-width: 100%;
+    overflow-x: auto;
 }
 </style>