From 2dd7fd30de520b6aeacc5f7b1f4a14fe154f0e2d Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 20 Dec 2025 00:53:37 +0800
Subject: [PATCH] update style for long content

---
 src/styles/desktop/global.scss                      | 10 ++++++++++
 src/views/desktop/insights/tabs/ExploreQueryTab.vue | 10 +++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/styles/desktop/global.scss b/src/styles/desktop/global.scss
index c2af0c40..147280fe 100644
--- a/src/styles/desktop/global.scss
+++ b/src/styles/desktop/global.scss
@@ -135,6 +135,16 @@ input[type=number] {
     color: rgba(var(--v-theme-on-background), var(--v-medium-emphasis-opacity));
 }
 
+.text-field-truncate.v-text-field {
+    .v-input__control {
+        .v-field__field {
+            > input.v-field__input {
+                text-overflow: ellipsis !important;
+            }
+        }
+    }
+}
+
 .chart-pointer {
     display: inline-block;
     margin-inline-end: 5px;
diff --git a/src/views/desktop/insights/tabs/ExploreQueryTab.vue b/src/views/desktop/insights/tabs/ExploreQueryTab.vue
index 708df421..f4cfa6bf 100644
--- a/src/views/desktop/insights/tabs/ExploreQueryTab.vue
+++ b/src/views/desktop/insights/tabs/ExploreQueryTab.vue
@@ -43,7 +43,7 @@
 
                             <div v-else-if="query.conditions && query.conditions.length > 0 && !showExpression">
                                 <div :key="conditionIndex" v-for="(conditionWithRelation, conditionIndex) in query.conditions">
-                                    <div class="d-flex align-center gap-2 mb-4">
+                                    <div class="d-flex overflow-x-auto align-center gap-2 mb-4">
                                         <v-select
                                             disabled
                                             class="flex-0-0"
@@ -92,7 +92,7 @@
                                             v-model="conditionWithRelation.condition.operator"
                                         />
 
-                                        <div class="d-flex w-100 flex-1-1">
+                                        <div class="d-flex w-100 flex-1-1" style="min-width: 280px;">
                                             <v-select
                                                 multiple chips closable-chips
                                                 density="compact"
@@ -120,7 +120,7 @@
                                             </v-select>
 
                                             <v-text-field
-                                                class="always-cursor-pointer"
+                                                class="always-cursor-pointer text-field-truncate"
                                                 density="compact"
                                                 item-title="displayName"
                                                 item-value="type"
@@ -134,7 +134,7 @@
                                             />
 
                                             <v-text-field
-                                                class="always-cursor-pointer"
+                                                class="always-cursor-pointer text-field-truncate"
                                                 density="compact"
                                                 item-title="displayName"
                                                 item-value="type"
@@ -148,7 +148,7 @@
                                             />
 
                                             <v-text-field
-                                                class="always-cursor-pointer"
+                                                class="always-cursor-pointer text-field-truncate"
                                                 density="compact"
                                                 item-title="displayName"
                                                 item-value="type"