fix(common): correct indentation for nested endpoints in sidebar (#5370)

packages/hoppscotch-common/src/components/collections/ExampleResponse.vue

@@ -4,11 +4,11 @@
     @contextmenu.prevent="options?.tippy?.show()"
   >
     <div
-      class="pointer-events-auto flex min-w-0 flex-1 space-x-2 cursor-pointer items-center justify-center"
+      class="pointer-events-auto flex min-w-0 flex-1 space-x-1 cursor-pointer items-center justify-center"
       @click="selectResponse()"
     >
       <span
-        class="pointer-events-none flex w-10 px-2 items-center justify-start truncate relative"
+        class="pointer-events-none flex w-8 items-center justify-center truncate relative"
       >
         <span
           class="truncate text-tiny font-semibold relative"
@@ -19,7 +19,7 @@
       </span>
 
       <span
-        class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
+        class="pointer-events-none flex min-w-0 flex-1 items-center py-2 transition group-hover:text-secondaryDark"
       >
         <span class="truncate font-semibold group-hover:text-secondaryDark">
           {{ responseName }}

packages/hoppscotch-common/src/components/collections/Request.vue

@@ -22,11 +22,11 @@
       @dragend="resetDragState"
       @contextmenu.prevent="options?.tippy?.show()"
     >
-      <div class="w-5 p-1 flex items-center justify-center">
+      <div class="ms-1 w-3 flex items-center justify-end">
         <component
           :is="isResponseVisible ? IconArrowDown : IconArrowRight"
           v-if="request.responses && Object.keys(request.responses).length > 0"
-          class="svg-icons cursor-pointer hover:bg-primaryDark transition rounded"
+          class="svg-icons w-3 cursor-pointer hover:bg-primaryDark transition rounded"
           @click="toggleRequestResponse()"
         />
       </div>
@@ -35,7 +35,7 @@
         @click="selectRequest()"
       >
         <span
-          class="pointer-events-none flex w-12 items-center justify-start truncate px-2"
+          class="pointer-events-none flex w-8 items-center justify-start truncate px-0.5"
           :style="{ color: getMethodLabelColorClassOf(request.method) }"
         >
           <component
@@ -174,7 +174,7 @@
 
     <div v-if="isResponseVisible" class="flex">
       <div
-        class="ml-[.6rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
+        class="ml-[1.35rem] flex w-0.5 transform cursor-nsResize bg-dividerLight transition hover:scale-x-125 hover:bg-dividerDark"
       ></div>
       <div class="flex flex-col w-full pl-3">
         <CollectionsExampleResponse