From ca0c858e0fae2a7e1fd5daff860e652868fc59af Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 10 Feb 2021 19:53:47 +0530
Subject: [PATCH] fix: broken mobile responsiveness - fixed #1472

---
 assets/scss/styles.scss         | 3 ++-
 components/layout/pw-header.vue | 4 ++--
 components/layout/sidenav.vue   | 3 +--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index eb71d9d97..4dd4a4da1 100644
--- a/assets/scss/styles.scss
+++ b/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;
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index f0fdf0078..b16e5b90e 100644
--- a/components/layout/pw-header.vue
+++ b/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" />
diff --git a/components/layout/sidenav.vue b/components/layout/sidenav.vue
index f999ba547..46f3777bf 100644
--- a/components/layout/sidenav.vue
+++ b/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 {