refactor: better shortcut indication

packages/hoppscotch-app/src/components/smart/Item.vue

@@ -51,7 +51,7 @@
       class="items-center self-center ml-4 svg-icons"
       :class="{ 'text-accent': activeInfoIcon }"
     />
-    <div v-if="shortcut.length" class="ml-2 <sm:hidden font-medium">
+    <div v-if="shortcut.length" class="ml-4 <sm:hidden font-medium">
       <kbd
         v-for="(key, index) in shortcut"
         :key="`key-${index}`"

packages/hoppscotch-app/src/components/smart/Modal.vue

@@ -43,8 +43,9 @@
               <h3 class="heading" :class="{ 'ml-4': !fullWidth }">
                 {{ title }}
               </h3>
-              <span class="flex">
+              <span class="flex items-center">
                 <slot name="actions"></slot>
+                <kbd class="mr-2 shortcut-key">ESC</kbd>
                 <ButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"