fix: placeholder size and text overflow on tab head (#3261)

packages/hoppscotch-common/assets/scss/styles.scss

@@ -221,6 +221,7 @@ a {
 
 [data-v-tippy] {
   @apply flex flex-1;
+  @apply truncate;
 }
 
 [interactive] > div {

packages/hoppscotch-common/src/components.d.ts

@@ -97,6 +97,7 @@ declare module '@vue/runtime-core' {
     HoppSmartSpinner: typeof import('@hoppscotch/ui')['HoppSmartSpinner']
     HoppSmartTab: typeof import('@hoppscotch/ui')['HoppSmartTab']
     HoppSmartTabs: typeof import('@hoppscotch/ui')['HoppSmartTabs']
+    HoppSmartToggle: typeof import('@hoppscotch/ui')['HoppSmartToggle']
     HoppSmartWindow: typeof import('@hoppscotch/ui')['HoppSmartWindow']
     HoppSmartWindows: typeof import('@hoppscotch/ui')['HoppSmartWindows']
     HttpAuthorization: typeof import('./components/http/Authorization.vue')['default']

packages/hoppscotch-common/src/components/app/Inspection.vue

@@ -31,7 +31,7 @@
           <div
             v-for="(inspector, index) in inspectionResults"
             :key="index"
-            class="flex self-stretch"
+            class="flex self-stretch max-w-md w-full"
           >
             <div
               class="flex flex-col flex-1 rounded border border-dashed border-dividerDark divide-y divide-dashed divide-dividerDark"

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -17,6 +17,7 @@
         :alt="`${t('error.network_fail')}`"
         :heading="t('error.network_fail')"
         :text="t('helpers.network_fail')"
+        large
       >
         <AppInterceptor class="p-2 border rounded border-dividerLight" />
       </HoppSmartPlaceholder>
@@ -26,6 +27,7 @@
         :alt="`${t('error.script_fail')}`"
         :label="t('error.script_fail')"
         :text="t('helpers.script_fail')"
+        large
       >
         <div
           class="mt-2 w-full px-4 py-2 overflow-auto font-mono text-red-400 whitespace-normal rounded bg-primaryLight"

packages/hoppscotch-common/src/components/http/TabHead.vue

@@ -21,7 +21,7 @@
       theme="popover"
       :on-shown="() => tippyActions!.focus()"
     >
-      <span class="leading-8 px-2">
+      <span class="leading-8 px-2 truncate">
         {{ tab.document.request.name }}
       </span>
       <template #content="{ hide }">

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="autocomplete-wrapper">
-    <div class="absolute inset-0 flex flex-1 overflow-x-auto">
+    <div
+      class="absolute inset-0 flex flex-1 divide-x divide-dividerLight overflow-x-auto"
+    >
       <div
         ref="editor"
         :placeholder="placeholder"
@@ -10,7 +12,10 @@
         @keydown="handleKeystroke"
         @focusin="showSuggestionPopover = true"
       ></div>
-      <AppInspection :inspection-results="inspectionResults" />
+      <AppInspection
+        :inspection-results="inspectionResults"
+        class="sticky inset-y-0 right-0 bg-primary rounded-r"
+      />
     </div>
     <ul
       v-if="showSuggestionPopover && autoCompleteSource"

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -71,9 +71,9 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const selectedEnvType = getSelectedEnvironmentType()
 
-      const envTypeIcon = `<i class="inline-flex -my-1 -mx-0.5 opacity-65 items-center text-base material-icons border-secondary">${
-        selectedEnvType === "TEAM_ENV" ? "people" : "person"
-      }</i>`
+      const envTypeIcon = `<span class="inline-flex -my-2 -mx-0.5 opacity-65 items-center text-base font-icon">${
+        selectedEnvType === "TEAM_ENV" ? "group" : "person"
+      }</span>`
 
       const appendEditAction = (tooltip: HTMLElement) => {
         const editIcon = document.createElement("span")
@@ -88,7 +88,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
             variableName: parsedEnvKey,
           })
         })
-        editIcon.innerHTML = `<i class="inline-flex items-center px-1 -mx-1 -my-1 text-base material-icons border-secondary">drive_file_rename_outline</i>`
+        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 -my-2 text-base font-icon">edit</span>`
         tooltip.appendChild(editIcon)
       }
 

packages/hoppscotch-sh-admin/assets/scss/styles.scss

@@ -221,6 +221,7 @@ a {
 
 [data-v-tippy] {
   @apply flex flex-1;
+  @apply truncate;
 }
 
 [interactive] > div {

packages/hoppscotch-ui/src/assets/scss/styles.scss

@@ -221,6 +221,7 @@ a {
 
 [data-v-tippy] {
   @apply flex flex-1;
+  @apply truncate;
 }
 
 [interactive] > div {

packages/hoppscotch-ui/src/components/smart/Placeholder.vue

@@ -4,22 +4,19 @@
       v-if="src"
       :src="src"
       loading="lazy"
-      class="inline-flex flex-col object-contain object-center w-16 h-16 mb-4"
+      class="inline-flex flex-col object-contain object-center my-4"
+      :class="large ? 'w-32 h-32' : 'w-16 h-16'"
       :alt="alt"
     />
-
     <slot name="icon"></slot>
-
     <span v-if="heading" class="mb-2 font-semibold text-center">
       {{ heading }}
     </span>
-
     <span
       class="max-w-sm mb-4 text-center whitespace-normal text-secondaryLight"
     >
       {{ text }}
     </span>
-
     <slot></slot>
   </div>
 </template>
@@ -31,6 +28,7 @@ withDefaults(
     alt?: string
     heading?: string
     text?: string
+    large?: boolean
   }>(),
   {
     alt: "",