From f723e6496aaef7c115c1ca5da110343cf81e5342 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 26 Jun 2023 18:30:25 +0530
Subject: [PATCH] fix: text overflow on details summary label (#3160)

Co-authored-by: Nivedin <nivedinp@gmail.com>
---
 packages/hoppscotch-common/src/components/app/Shortcuts.vue | 5 +++--
 packages/hoppscotch-common/src/components/history/index.vue | 6 ++++--
 .../hoppscotch-common/src/components/http/TestResult.vue    | 6 ++++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/app/Shortcuts.vue b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
index 2adfd302a..40edaf886 100644
--- a/packages/hoppscotch-common/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
@@ -44,8 +44,9 @@
           class="flex flex-col items-center justify-center p-4 text-secondaryLight"
         >
           <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-          <span class="my-2 text-center">
-            {{ t("state.nothing_found") }} "{{ filterText }}"
+          <span class="my-2 text-center flex flex-col">
+            {{ t("state.nothing_found") }}
+            <span class="break-all">"{{ filterText }}"</span>
           </span>
         </div>
       </div>
diff --git a/packages/hoppscotch-common/src/components/history/index.vue b/packages/hoppscotch-common/src/components/history/index.vue
index 66bb1275c..5301b48b0 100644
--- a/packages/hoppscotch-common/src/components/history/index.vue
+++ b/packages/hoppscotch-common/src/components/history/index.vue
@@ -72,9 +72,11 @@
           class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
         >
           <span
-            class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
+            class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary truncate"
           >
-            <icon-lucide-chevron-right class="mr-2 indicator" />
+            <icon-lucide-chevron-right
+              class="mr-2 indicator flex flex-shrink-0"
+            />
             <span
               :class="[
                 { 'capitalize-first': groupSelection === 'TIME' },
diff --git a/packages/hoppscotch-common/src/components/http/TestResult.vue b/packages/hoppscotch-common/src/components/http/TestResult.vue
index 607904446..8bf5e3048 100644
--- a/packages/hoppscotch-common/src/components/http/TestResult.vue
+++ b/packages/hoppscotch-common/src/components/http/TestResult.vue
@@ -28,9 +28,11 @@
               class="flex items-center justify-between flex-1 min-w-0 transition cursor-pointer focus:outline-none text-secondaryLight text-tiny group"
             >
               <span
-                class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary"
+                class="inline-flex items-center justify-center px-4 py-2 transition group-hover:text-secondary truncate"
               >
-                <icon-lucide-chevron-right class="mr-2 indicator" />
+                <icon-lucide-chevron-right
+                  class="mr-2 indicator flex flex-shrink-0"
+                />
                 <span class="truncate capitalize-first">
                   {{ t("environment.title") }}
                 </span>