refactor(ui): minor stylings

components/lenses/ResponseBodyRenderer.vue

@@ -12,7 +12,8 @@
     <SmartTab
       v-if="Object.keys(response.headers).length !== 0"
       id="headers"
-      :label="`Headers \xA0 • \xA0 ${Object.keys(response.headers).length}`"
+      :label="$t('Headers')"
+      :info="Object.keys(response.headers).length.toString()"
     >
       <LensesHeadersRenderer :headers="response.headers" />
     </SmartTab>

components/lenses/renderers/HTMLLensRenderer.vue

@@ -1,7 +1,20 @@
 <template>
   <div>
-    <div class="flex flex-1 items-center justify-between">
-      <label for="body">{{ $t("response_body") }}</label>
+    <div
+      class="
+        flex flex-1
+        sticky
+        top-23
+        z-10
+        bg-primary
+        items-center
+        justify-between
+        border-b border-divider
+      "
+    >
+      <label for="body" class="px-4 font-semibold text-xs">
+        {{ $t("response_body") }}
+      </label>
       <div>
         <ButtonSecondary
           v-if="response.body"

components/lenses/renderers/ImageLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/lenses/renderers/JSONLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/lenses/renderers/RawLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">

components/lenses/renderers/XMLLensRenderer.vue

@@ -9,6 +9,7 @@
         bg-primary
         items-center
         justify-between
+        border-b border-divider
       "
     >
       <label for="body" class="px-4 font-semibold text-xs">