refactor: set placement as top by edfault for modals, better response header layout

components/lenses/HeadersRenderer.vue

@@ -1,21 +1,35 @@
 <template>
-  <div class="p-2">
+  <div>
     <div
       v-for="(header, index) in headers"
       :key="`header-${index}`"
-      class="flex items-center"
+      class="
+        divide-x divide-dividerLight
+        border-b border-dividerLight
+        flex
+        group
+      "
     >
-      <span class="flex min-w-0 p-2 transition group-hover:text-secondaryDark">
-        <span class="rounded select-all truncate">
-          {{ header.key }}
-        </span>
-      </span>
-      <span class="flex mx-2 justify-center items-center truncate"> → </span>
       <span
         class="
           flex flex-1
           min-w-0
-          p-2
+          py-2
+          px-4
+          transition
+          group-hover:text-secondaryDark
+        "
+      >
+        <span class="rounded select-all truncate">
+          {{ header.key }}
+        </span>
+      </span>
+      <span
+        class="
+          flex flex-1
+          min-w-0
+          py-2
+          px-4
           transition
           group-hover:text-secondaryDark
         "