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

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"