Fix broken mobile responsiveness and URL input type

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%;

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>

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"