fix(ui): add ellipsis to alert assets column (#808)
Co-authored-by: Davide Di Modica <webmaster.ddm@gmail.com>
taylor_socfortress committed
Apr 23, 2026 at 11:35 UTC
38f3e8fb3719727042dbfcbbde0e7c79cb1c74f8
1 file changed
+8
-2
customer-portal/src/components/alerts/List.vue
+8
-2
@@ -64,7 +64,7 @@ import type { Alert, AlertsListResponse, AlertStatus } from "@/types/alerts"
64
import type { ApiError, CommonResponse, Pagination } from "@/types/common"
65
import { useDebounceFn, useElementSize } from "@vueuse/core"
66
import axios from "axios"
67
-import { NDataTable, NEmpty, NPagination, NTag, useMessage } from "naive-ui"
67
+import { NDataTable, NEllipsis, NEmpty, NPagination, NTag, useMessage } from "naive-ui"
68
import { computed, ref, useTemplateRef, watch } from "vue"
69
import Api from "@/api"
70
import AlertDetailsButton from "@/components/alerts/AlertDetailsButton.vue"
@@ -117,7 +117,13 @@ const columns = computed<DataTableColumns<Alert>>(() => [
117
title: "Assets",
118
key: "assets",
119
width: "100%",
120
- render: row => <div>{row.assets.map(asset => asset.asset_name).join(", ")}</div>
120
+ render: row => (
121
+ <div class="flex max-w-80 flex-col gap-0.5">
122
+ <NEllipsis class="text-sm" tooltip={{ contentClass: "text-xs max-w-90" }}>
123
+ {row.assets.map(asset => asset.asset_name).join(", ")}
124
+ </NEllipsis>
125
+ </div>
126
+ )
127
},
128
{
129
title: "Created",