fix: responsiveness

assets/scss/styles.scss

@@ -105,11 +105,14 @@ a {
 .tippy-popper {
   .tooltip-theme {
     @apply bg-tooltip;
-    @apply text-primary text-xs;
+    @apply text-primary;
     @apply font-semibold;
     @apply py-1 px-2;
     @apply shadow;
 
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
+
     kbd {
       @apply first:ml-2;
       @apply last:-mr-1;
@@ -128,6 +131,9 @@ a {
     @apply p-2;
     @apply shadow-lg;
     @apply focus:outline-none;
+
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
   }
 
   &[x-placement^="top"] .tippy-tooltip .tippy-arrow {
@@ -330,11 +336,14 @@ input[type="checkbox"] {
   .toasted {
     &.toasted-primary {
       @apply bg-tooltip;
-      @apply text-primary text-xs;
+      @apply text-primary;
       @apply justify-start;
       @apply shadow;
       @apply font-semibold;
 
+      font-size: var(--body-font-size);
+      line-height: var(--body-line-height);
+
       .action {
         @apply ml-auto;
         @apply transition;

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: "",

layouts/default.vue

@@ -2,11 +2,14 @@
   <div class="flex h-screen w-screen">
     <Splitpanes :dbl-click-splitter="false" horizontal>
       <Pane class="flex flex-1 !overflow-auto">
-        <Splitpanes :dbl-click-splitter="false" vertical>
+        <Splitpanes
+          :dbl-click-splitter="false"
+          :horizontal="!(windowInnerWidth >= 768)"
+        >
           <Pane
             v-if="LEFT_SIDEBAR"
-            style="width: auto"
-            class="hide-scrollbar overflow-auto"
+            style="width: auto; height: auto"
+            class="hide-scrollbar !overflow-auto"
           >
             <AppSidenav />
           </Pane>
@@ -52,6 +55,7 @@ export default defineComponent({
     return {
       LEFT_SIDEBAR: null,
       ZEN_MODE: null,
+      windowInnerWidth: 0,
     }
   },
   subscriptions() {
@@ -83,6 +87,8 @@ export default defineComponent({
     })
   },
   async mounted() {
+    window.addEventListener("resize", this.handleResize)
+    this.handleResize()
     performMigrations()
     console.log(
       "%cWe ❤︎ open source!",
@@ -120,5 +126,13 @@ export default defineComponent({
 
     logPageView(this.$router.currentRoute.fullPath)
   },
+  destroyed() {
+    window.removeEventListener("resize", this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.windowInnerWidth = window.innerWidth
+    },
+  },
 })
 </script>

pages/settings.vue

@@ -250,6 +250,7 @@
                   svg="firefox"
                   label="Firefox"
                   :info-icon="hasFirefoxExtInstalled ? 'check_circle' : ''"
+                  outline
                 />
               </span>
               <span>
@@ -259,6 +260,7 @@
                   svg="chrome"
                   label="Chrome"
                   :info-icon="hasChromeExtInstalled ? 'check_circle' : ''"
+                  outline
                 />
               </span>
             </div>