From 72ef406cd84c80538d7c1715e35ae398ae5ddcd8 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Mon, 8 Jan 2024 00:25:25 +0800
Subject: [PATCH] fix: tooltips exceed the display area #112

---
 frontend/src/components/content_value/ContentSlog.vue      | 2 ++
 frontend/src/components/content_value/ContentValueHash.vue | 5 +++++
 frontend/src/components/content_value/ContentValueList.vue | 2 ++
 frontend/src/components/content_value/ContentValueSet.vue  | 2 ++
 frontend/src/components/content_value/ContentValueZSet.vue | 2 ++
 5 files changed, 13 insertions(+)

diff --git a/frontend/src/components/content_value/ContentSlog.vue b/frontend/src/components/content_value/ContentSlog.vue
index d782cc4..5f7d408 100644
--- a/frontend/src/components/content_value/ContentSlog.vue
+++ b/frontend/src/components/content_value/ContentSlog.vue
@@ -61,6 +61,8 @@ const columns = computed(() => [
             tooltip: {
                 style: {
                     maxWidth: '80vw',
+                    maxHeight: '60vh',
+                    overflowY: 'scroll',
                 },
             },
         },
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index 7aa3d56..386975d 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -91,8 +91,11 @@ const fieldColumn = computed(() => ({
         tooltip: {
             style: {
                 maxWidth: '80vw',
+                maxHeight: '60vh',
+                overflowY: 'scroll',
             },
         },
+        lineClamp: 10,
     },
     filterOptionValue: fieldFilterOption.value,
     className: inEdit.value ? 'clickable' : '',
@@ -120,6 +123,8 @@ const valueColumn = computed(() => ({
               tooltip: {
                   style: {
                       maxWidth: '80vw',
+                      maxHeight: '60vh',
+                      overflowY: 'scroll',
                   },
               },
           },
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index ba6a4ca..cee89d8 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -92,6 +92,8 @@ const valueColumn = computed(() => ({
               tooltip: {
                   style: {
                       maxWidth: '80vw',
+                      maxHeight: '60vh',
+                      overflowY: 'scroll',
                   },
               },
           },
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index ecc87b8..72d9964 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -91,6 +91,8 @@ const valueColumn = computed(() => ({
               tooltip: {
                   style: {
                       maxWidth: '80vw',
+                      maxHeight: '60vh',
+                      overflowY: 'scroll',
                   },
               },
           },
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 68f369a..75ff2c9 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -140,6 +140,8 @@ const valueColumn = computed(() => ({
               tooltip: {
                   style: {
                       maxWidth: '80vw',
+                      maxHeight: '60vh',
+                      overflowY: 'scroll',
                   },
               },
           },