fix: search input box length overflow (#217)

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>

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"

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"

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"

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"