refactor(ui): better rendering with Inter font

components/history/graphql/Card.vue

@@ -2,7 +2,18 @@
   <div class="flex flex-col group">
     <div class="flex items-center">
       <span
-        class="cursor-pointer flex font-semibold flex-1 text-xs min-w-0 py-3 pr-2 pl-4 transition group-hover:text-secondaryDark"
+        class="
+          cursor-pointer
+          flex
+          font-semibold
+          flex-1
+          min-w-0
+          py-2
+          pr-2
+          pl-4
+          transition
+          group-hover:text-secondaryDark
+        "
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
       >
@@ -40,7 +51,7 @@
       <span
         v-for="(line, index) in query"
         :key="`line-${index}`"
-        class="cursor-pointer font-mono text-xs text-secondaryLight px-4 truncate"
+        class="cursor-pointer font-mono text-secondaryLight px-4 truncate"
         data-testid="restore_history_entry"
         @click="$emit('use-entry')"
       >

components/history/index.vue

@@ -5,7 +5,7 @@
         bg-primaryLight
         border-b border-dividerLight
         flex
-        top-10
+        top-8
         z-10
         sticky
       "
@@ -18,8 +18,7 @@
           flex
           font-semibold font-mono
           flex-1
-          text-xs
-          py-3
+          py-2
           px-4
           focus:outline-none
         "
@@ -60,7 +59,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("nothing_found") }} "{{ filterText }}"
       </span>
     </div>
@@ -69,7 +68,7 @@
       class="flex flex-col text-secondaryLight p-4 items-center justify-center"
     >
       <i class="opacity-75 pb-2 material-icons">schedule</i>
-      <span class="text-xs text-center">
+      <span class="text-center">
         {{ $t("history_empty") }}
       </span>
     </div>

components/history/rest/Card.vue

@@ -1,7 +1,16 @@
 <template>
   <div class="flex items-center group">
     <span
-      class="cursor-pointer flex font-mono font-bold mx-2 text-xs w-12 justify-center items-center truncate"
+      class="
+        cursor-pointer
+        flex
+        font-mono font-bold
+        mx-2
+        w-12
+        justify-center
+        items-center
+        truncate
+      "
       :class="entryStatus.className"
       data-testid="restore_history_entry"
       :title="duration"
@@ -10,7 +19,17 @@
       {{ entry.method }}
     </span>
     <span
-      class="cursor-pointer flex font-semibold flex-1 text-xs min-w-0 py-3 pr-2 transition group-hover:text-secondaryDark"
+      class="
+        cursor-pointer
+        flex
+        font-semibold
+        flex-1
+        min-w-0
+        py-2
+        pr-2
+        transition
+        group-hover:text-secondaryDark
+      "
       data-testid="restore_history_entry"
       :title="duration"
       @click="$emit('use-entry')"