From 09360abf81f7c84219540bede7b0a7537c479768 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>
---
 .../hoppscotch-common/src/components/app/Shortcuts.vue | 10 ++++++----
 .../hoppscotch-common/src/components/history/index.vue |  6 ++++--
 .../src/components/http/TestResult.vue                 |  6 ++++--
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/app/Shortcuts.vue b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
index 1a8608552..5fc9dc342 100644
--- a/packages/hoppscotch-common/src/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-common/src/components/app/Shortcuts.vue
@@ -43,10 +43,12 @@
           v-if="searchResults.length === 0"
           :text="`${t('state.nothing_found')} ‟${filterText}”`"
         >
-          <template #icon>
-            <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
-          </template>
-        </HoppSmartPlaceholder>
+          <icon-lucide-search class="pb-2 opacity-75 svg-icons" />
+          <span class="my-2 text-center flex flex-col">
+            {{ t("state.nothing_found") }}
+            <span class="break-all">"{{ filterText }}"</span>
+          </span>
+        </div>
       </div>
       <div v-else class="flex flex-col divide-y divide-dividerLight">
         <details
diff --git a/packages/hoppscotch-common/src/components/history/index.vue b/packages/hoppscotch-common/src/components/history/index.vue
index 1dcfa6b89..f29d4d3ef 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 c746fa2e2..307e70fed 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>