fix: constrain address management modal width (#1002)

* fix: constrain address management modal width

* fix: enable address table horizontal scroll
This commit is contained in:
Dream Hunter
2026-04-25 16:33:18 +08:00
committed by GitHub
parent eb62c37e02
commit 7e7f824f88
8 changed files with 49 additions and 8 deletions
@@ -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>
+2 -1
View File
@@ -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>
+3 -1
View File
@@ -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>
+14 -1
View File
@@ -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>
+14 -1
View File
@@ -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>
@@ -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>