From 4f75dd30fef799cfad0e1af0a15cc0b413a58104 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Mon, 17 Aug 2020 17:04:13 +0530
Subject: [PATCH] Fix broken mobile responsiveness and URL input type

---
 assets/css/styles.scss          | 20 +++++---------------
 components/layout/pw-header.vue | 15 ++++++++++++++-
 pages/index.vue                 |  2 +-
 3 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 17533a34e..c09634527 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -383,12 +383,16 @@ section:target {
 
 input[type="file"],
 input[type="radio"],
-.hide-on-large-screen,
 #installPWA,
 .hidden {
   display: none;
 }
 
+.show-on-large-screen {
+  display: flex;
+  flex: 1;
+}
+
 .method,
 kbd,
 select,
@@ -574,15 +578,6 @@ ol li {
   }
 }
 
-.show-on-small-screen {
-  display: flex;
-}
-
-.show-on-large-screen {
-  display: flex;
-  flex: 1;
-}
-
 .info-response {
   color: #ffeb3b;
 }
@@ -726,11 +721,6 @@ section {
     display: none;
   }
 
-  .hide-on-large-screen,
-  .show-on-small-screen {
-    display: inline-flex;
-  }
-
   .sticky-inner {
     position: relative;
     width: 100%;
diff --git a/components/layout/pw-header.vue b/components/layout/pw-header.vue
index 063444259..7dcfed28e 100644
--- a/components/layout/pw-header.vue
+++ b/components/layout/pw-header.vue
@@ -3,7 +3,8 @@
     <div class="flex-wrap">
       <span class="slide-in">
         <nuxt-link :to="localePath('index')">
-          <h1 class="logo">Hoppscotch</h1>
+          <h1 class="logo hide-on-small-screen">Hoppscotch</h1>
+          <h1 class="logo show-on-small-screen">Hs</h1>
         </nuxt-link>
       </span>
       <span>
@@ -233,6 +234,8 @@
 </template>
 
 <style scoped lang="scss">
+$responsiveWidth: 768px;
+
 @keyframes slideIn {
   0% {
     opacity: 0;
@@ -257,6 +260,16 @@
     color: var(--ac-color);
   }
 }
+
+.show-on-small-screen {
+  display: none;
+}
+
+@media (max-width: $responsiveWidth) {
+  .show-on-small-screen {
+    display: inline-flex;
+  }
+}
 </style>
 
 <script>
diff --git a/pages/index.vue b/pages/index.vue
index 62a41428e..46c46f186 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -148,7 +148,7 @@
                 @keyup.enter="isValidURL ? sendRequest() : null"
                 id="url"
                 name="url"
-                type="url"
+                type="text"
                 v-model="uri"
                 spellcheck="false"
                 @input="pathInputHandler"