fix: text overflow on details summary label (#3160)

Co-authored-by: Nivedin <nivedinp@gmail.com>

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

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' },

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>