fix(connector): incomplete display

emqx · Sep 29, 2024 · f7f4ea6 · f7f4ea6
1 parent 70db2e9
commit f7f4ea6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/components/OverflowTooltip.vue b/src/components/OverflowTooltip.vue
@@ -66,7 +66,7 @@ const detectContentOverflow = (ele: HTMLElement) => {
   if (
     isGreaterThan(rangeWidth + horizontalPadding, cellChildWidth) ||
     isGreaterThan(rangeHeight + verticalPadding, cellChildHeight) ||
-    isGreaterThan(ele.scrollWidth, cellChildWidth)
+    isGreaterThan(ele.scrollWidth, cellChildWidth, 1)
   ) {
     return true
   }

diff --git a/src/views/RuleEngine/Connector/ConnectorDetail.vue b/src/views/RuleEngine/Connector/ConnectorDetail.vue
@@ -5,7 +5,9 @@
         <template #content>
           <div class="vertical-align-center">
             <img :src="getBridgeIcon(connectorData.type)" />
-            <p class="block-title">{{ connectorName }}</p>
+            <div class="block-title">
+              <CommonOverflowTooltip :content="connectorName" />
+            </div>
             <TargetItemStatus type="connector" :target="connectorData" is-tag />
             <el-tag type="info" class="section-status">
               {{ getTypeStr(connectorData.type) }}
@@ -123,6 +125,7 @@
 
 <script setup lang="ts">
 import { customValidate } from '@/common/tools'
+import CommonOverflowTooltip from '@/components/CommonOverflowTooltip.vue'
 import DetailHeader from '@/components/DetailHeader.vue'
 import useBridgeTypeValue, {
   useBridgeTypeIcon,
@@ -289,5 +292,11 @@ const submit = async () => {
   .form-container {
     width: 75%;
   }
+  .block-title {
+    max-width: 200px;
+  }
+  .el-page-header__content {
+    max-width: 700px;
+  }
 }
 </style>