fix: broken mobile responsiveness - fixed #1472

assets/scss/styles.scss

@@ -643,7 +643,8 @@ ol li {
   @apply flex-1;
   @apply flex-row;
 
-  * {
+  span,
+  div {
     @apply inline-flex;
     @apply flex-no-wrap;
     @apply items-center;

components/layout/pw-header.vue

@@ -13,7 +13,7 @@
           width="150"
           height="20"
           title="GitHub"
-          class="ml-8"
+          class="ml-8 hide-on-small-screen"
           loading="lazy"
         ></iframe>
       </span>
@@ -22,7 +22,7 @@
           href="https://www.deta.sh/?ref=hoppscotch"
           target="_blank"
           rel="noopener"
-          class="px-4 py-2 mx-4 font-mono text-sm rounded-md bg-bgDarkColor hide-on-small-screen"
+          class="inline-flex items-center px-4 py-2 mx-4 font-mono text-sm rounded-md bg-bgDarkColor hide-on-small-screen"
         >
           Deploy your api for free on Deta
           <img class="w-8 ml-2" src="~assets/images/deta_portal.svg" alt="Deta" />

components/layout/sidenav.vue

@@ -298,7 +298,6 @@ nav.secondary-nav {
     @apply flex-row;
     @apply flex-no-wrap;
     @apply overflow-auto;
-    @apply justify-between;
     @apply bg-bgDarkColor;
     @apply space-y-0;
 
@@ -306,7 +305,7 @@ nav.secondary-nav {
 
     a {
       @apply bg-transparent;
-      @apply m-2;
+      @apply my-2;
       @apply flex-1;
 
       &.nuxt-link-exact-active {