From f5611a2635e08d4bce2f00d3d4919460f71d78e3 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Sat, 16 Dec 2023 01:45:28 +0800
Subject: [PATCH] fix: tooltip too long to show

---
 .../src/components/content_value/ContentSlog.vue     |  6 +++++-
 .../components/content_value/ContentValueHash.vue    | 12 ++++++++++--
 .../components/content_value/ContentValueList.vue    |  6 +++++-
 .../src/components/content_value/ContentValueSet.vue |  6 +++++-
 .../components/content_value/ContentValueZSet.vue    |  6 +++++-
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index 3763f08..34b80f8 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -58,7 +58,11 @@ const columns = computed(() => [
         align: 'center',
         titleAlign: 'center',
         ellipsis: {
-            tooltip: true,
+            tooltip: {
+                style: {
+                    maxWidth: '80vw',
+                },
+            },
         },
         render: ({ client, addr }, index) => {
             let content = ''
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index d2fe5fc..6491f06 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -89,7 +89,11 @@ const fieldColumn = computed(() => ({
     titleAlign: 'center',
     resizable: true,
     ellipsis: {
-        tooltip: true,
+        tooltip: {
+            style: {
+                maxWidth: '80vw',
+            },
+        },
     },
     filterOptionValue: fieldFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
@@ -114,7 +118,11 @@ const valueColumn = computed(() => ({
     ellipsis: displayCode.value
         ? false
         : {
-              tooltip: true,
+              tooltip: {
+                  style: {
+                      maxWidth: '80vw',
+                  },
+              },
           },
     // filterOptionValue: valueFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index 584a1a8..ff2dc01 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -90,7 +90,11 @@ const valueColumn = computed(() => ({
     ellipsis: displayCode.value
         ? false
         : {
-              tooltip: true,
+              tooltip: {
+                  style: {
+                      maxWidth: '80vw',
+                  },
+              },
           },
     filterOptionValue: valueFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 716c6c1..6fee690 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -89,7 +89,11 @@ const valueColumn = computed(() => ({
     ellipsis: displayCode.value
         ? false
         : {
-              tooltip: true,
+              tooltip: {
+                  style: {
+                      maxWidth: '80vw',
+                  },
+              },
           },
     filterOptionValue: valueFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index bac9ca9..7914eaa 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -138,7 +138,11 @@ const valueColumn = computed(() => ({
     ellipsis: displayCode.value
         ? false
         : {
-              tooltip: true,
+              tooltip: {
+                  style: {
+                      maxWidth: '80vw',
+                  },
+              },
           },
     filterOptionValue: valueFilterOption.value,
     className: inEdit.value ? 'clickable' : '',