refactor(ui): better rendering with Inter font

components/lenses/HeadersRenderer.vue

@@ -6,19 +6,41 @@
       class="flex items-center"
     >
       <span
-        class="flex font-semibold text-xs min-w-0 p-2 transition group-hover:text-secondaryDark"
+        class="
+          flex
+          font-semibold
+          min-w-0
+          p-2
+          transition
+          group-hover:text-secondaryDark
+        "
       >
         <span class="truncate">
           {{ header.key }}
         </span>
       </span>
       <span
-        class="flex font-mono font-bold mx-2 text-xs justify-center items-center truncate"
+        class="
+          flex
+          font-mono font-bold
+          mx-2
+          justify-center
+          items-center
+          truncate
+        "
       >
         →
       </span>
       <span
-        class="flex font-semibold flex-1 text-xs min-w-0 p-2 transition group-hover:text-secondaryDark"
+        class="
+          flex
+          font-semibold
+          flex-1
+          min-w-0
+          p-2
+          transition
+          group-hover:text-secondaryDark
+        "
       >
         <span class="truncate">
           {{ header.value }}

components/lenses/ResponseBodyRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartTabs styles="sticky z-10 top-13">
+  <SmartTabs styles="sticky z-10 top-12">
     <SmartTab
       v-for="(lens, index) in validLenses"
       :id="lens.lensName"

components/lenses/renderers/HTMLLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -48,7 +48,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/ImageLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>

components/lenses/renderers/JSONLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -42,7 +42,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/RawLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -41,7 +41,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,

components/lenses/renderers/XMLLensRenderer.vue

@@ -5,14 +5,14 @@
         bg-primary
         border-b border-dividerLight
         flex flex-1
-        top-23
+        top-20
         z-10
         sticky
         items-center
         justify-between
       "
     >
-      <label for="body" class="font-semibold text-xs px-4">
+      <label for="body" class="font-semibold px-4">
         {{ $t("response_body") }}
       </label>
       <div>
@@ -41,7 +41,7 @@
         :options="{
           maxLines: Infinity,
           minLines: '16',
-          fontSize: '14px',
+          fontSize: '12px',
           autoScrollEditorIntoView: true,
           readOnly: true,
           showPrintMargin: false,