From 8ab82534e18a5f6e5415c962a0d3f44b9d2e58b2 Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Wed, 3 Apr 2024 14:47:04 +0800
Subject: [PATCH] fix: search input box length overflow (#217)

---
 .../content_value/ContentSearchInput.vue      | 26 ++++++++++++++-----
 .../content_value/ContentValueHash.vue        |  2 +-
 .../content_value/ContentValueList.vue        |  2 +-
 .../content_value/ContentValueSet.vue         |  2 +-
 .../content_value/ContentValueZSet.vue        |  2 +-
 5 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/content_value/ContentSearchInput.vue b/frontend/src/components/content_value/ContentSearchInput.vue
index 2b6eb5c..7ee1be7 100644
--- a/frontend/src/components/content_value/ContentSearchInput.vue
+++ b/frontend/src/components/content_value/ContentSearchInput.vue
@@ -100,7 +100,7 @@ defineExpose({
 </script>
 
 <template>
-    <n-input-group>
+    <n-input-group style="overflow: hidden">
         <slot name="prepend" />
         <n-input
             v-model:value="inputData.filter"
@@ -175,10 +175,22 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-//:deep(.n-input__prefix) {
-//    max-width: 50%;
-//}
-//:deep(.n-tag__content) {
-//    overflow: hidden;
-//}
+:deep(.n-input) {
+    width: 100%;
+    overflow: hidden;
+}
+
+:deep(.n-input__prefix) {
+    max-width: 50%;
+
+    & > div {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+:deep(.n-tag__content) {
+    overflow: hidden;
+    max-width: 100%;
+}
 </style>
diff --git a/frontend/src/components/content_value/ContentValueHash.vue b/frontend/src/components/content_value/ContentValueHash.vue
index ca9a864..4d83144 100644
--- a/frontend/src/components/content_value/ContentValueHash.vue
+++ b/frontend/src/components/content_value/ContentValueHash.vue
@@ -335,7 +335,7 @@ defineExpose({
     <div class="content-wrapper flex-box-v">
         <slot name="toolbar" />
         <div class="tb2 value-item-part flex-box-h">
-            <div class="flex-box-h">
+            <div class="flex-box-h" style="max-width: 50%">
                 <content-search-input
                     ref="searchInputRef"
                     @filter-changed="onFilterInput"
diff --git a/frontend/src/components/content_value/ContentValueList.vue b/frontend/src/components/content_value/ContentValueList.vue
index efd1e2f..68e2e02 100644
--- a/frontend/src/components/content_value/ContentValueList.vue
+++ b/frontend/src/components/content_value/ContentValueList.vue
@@ -309,7 +309,7 @@ defineExpose({
     <div class="content-wrapper flex-box-v">
         <slot name="toolbar" />
         <div class="tb2 value-item-part flex-box-h">
-            <div class="flex-box-h">
+            <div class="flex-box-h" style="max-width: 50%">
                 <content-search-input
                     ref="searchInputRef"
                     @filter-changed="onFilterInput"
diff --git a/frontend/src/components/content_value/ContentValueSet.vue b/frontend/src/components/content_value/ContentValueSet.vue
index 329e474..6c7a902 100644
--- a/frontend/src/components/content_value/ContentValueSet.vue
+++ b/frontend/src/components/content_value/ContentValueSet.vue
@@ -306,7 +306,7 @@ defineExpose({
     <div class="content-wrapper flex-box-v">
         <slot name="toolbar" />
         <div class="tb2 value-item-part flex-box-h">
-            <div class="flex-box-h">
+            <div class="flex-box-h" style="max-width: 50%">
                 <content-search-input
                     ref="searchInputRef"
                     @filter-changed="onFilterInput"
diff --git a/frontend/src/components/content_value/ContentValueZSet.vue b/frontend/src/components/content_value/ContentValueZSet.vue
index 7d09dcb..15df6d8 100644
--- a/frontend/src/components/content_value/ContentValueZSet.vue
+++ b/frontend/src/components/content_value/ContentValueZSet.vue
@@ -341,7 +341,7 @@ defineExpose({
     <div class="content-wrapper flex-box-v">
         <slot name="toolbar" />
         <div class="tb2 value-item-part flex-box-h">
-            <div class="flex-box-h">
+            <div class="flex-box-h" style="max-width: 50%">
                 <content-search-input
                     ref="searchInputRef"
                     @filter-changed="onFilterInput"