refactor(ui): minor stylings

components/http/Headers.vue

@@ -1,6 +1,17 @@
 <template>
   <AppSection label="headers">
-    <div class="flex flex-1 items-center justify-between pl-4">
+    <div
+      class="
+        sticky
+        top-110px
+        z-10
+        bg-primary
+        flex flex-1
+        items-center
+        justify-between
+        pl-4
+      "
+    >
       <label for="headerList" class="font-semibold text-xs">
         {{ $t("header_list") }}
       </label>

components/http/Parameters.vue

@@ -1,6 +1,17 @@
 <template>
   <AppSection label="parameters">
-    <div class="flex flex-1 items-center justify-between pl-4">
+    <div
+      class="
+        sticky
+        top-110px
+        z-10
+        bg-primary
+        flex flex-1
+        items-center
+        justify-between
+        pl-4
+      "
+    >
       <label for="paramList" class="font-semibold text-xs">
         {{ $t("parameter_list") }}
       </label>

components/http/ResponseMeta.vue

@@ -12,21 +12,23 @@
       space-x-8
     "
   >
-    <i v-if="response.type === 'loading'" class="animate-spin material-icons"
-      >refresh</i
-    >
-    <span v-else>
-      <span class="text-secondaryDark"> Status: </span>
-      {{ response.statusCode || $t("waiting_send_req") }}
-    </span>
-    <span class="text-xs">
-      <span class="text-secondaryDark"> Time: </span>
-      {{ `${response.meta.responseDuration} ms` }}
-    </span>
-    <span class="text-xs">
-      <span class="text-secondaryDark"> Size: </span>
-      {{ `${response.meta.responseSize} B` }}
-    </span>
+    <i v-if="response.type === 'loading'" class="animate-spin material-icons">
+      refresh
+    </i>
+    <div v-else :class="statusCategory.className">
+      <span v-if="response.statusCode">
+        <span class="text-secondaryDark"> Status: </span>
+        {{ response.statusCode || $t("waiting_send_req") }}
+      </span>
+      <span v-if="response.meta.responseDuration" class="text-xs">
+        <span class="text-secondaryDark"> Time: </span>
+        {{ `${response.meta.responseDuration} ms` }}
+      </span>
+      <span v-if="response.meta.responseSize" class="text-xs">
+        <span class="text-secondaryDark"> Size: </span>
+        {{ `${response.meta.responseSize} B` }}
+      </span>
+    </div>
   </div>
 </template>