fix: responsiveness

components/app/Footer.vue

@@ -73,7 +73,7 @@
                 @click.native="$refs.options.tippy().hide()"
               />
               <!-- <SmartItem :label="$t('app.status')" /> -->
-              <div class="flex text-xs opacity-50 py-2 px-4">
+              <div class="flex opacity-50 py-2 px-4">
                 {{ `${$t("app.name")} ${$t("app.version")}` }}
               </div>
             </div>

components/app/Header.vue

@@ -7,7 +7,7 @@
       <span>Hoppscotch</span>
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
-      <AppGitHubStarButton class="mt-1 mr-2" />
+      <AppGitHubStarButton class="flex mx-2 mt-1" />
       <TabPrimary
         id="installPWA"
         v-tippy="{ theme: 'tooltip' }"

components/app/Sidenav.vue

@@ -1,6 +1,6 @@
 <template>
   <aside>
-    <nav class="flex flex-col flex-nowrap">
+    <nav class="flex flex-nowrap md:flex-col">
       <nuxt-link
         v-for="(navigation, index) in primaryNavigation"
         :key="`navigation-${index}`"

components/smart/Item.vue

@@ -19,6 +19,10 @@
       { 'pointer-events-none': loading },
       { 'flex-1': label },
       { 'flex-row-reverse justify-end': reverse },
+      {
+        'border border-divider hover:border-dividerDark focus:border-dividerDark':
+          outline,
+      },
     ]"
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
@@ -99,6 +103,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
     infoIcon: {
       type: String,
       default: "",