From 858ab252a602a57710504c9ba607156cef06673d Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Sat, 12 Dec 2020 19:16:37 +0530
Subject: [PATCH] fix: input borders

---
 assets/scss/styles.scss                      | 1 +
 components/environments/edit-environment.vue | 2 +-
 components/http/http-headers.vue             | 2 +-
 components/http/http-parameters.vue          | 2 +-
 components/realtime/socketio.vue             | 2 +-
 components/ui/accent-mode-picker.vue         | 4 ++--
 components/ui/color-mode-picker.vue          | 4 ++--
 components/ui/pw-toggle.vue                  | 1 +
 components/ui/url-field.vue                  | 6 ++++++
 pages/graphql.vue                            | 2 +-
 pages/index.vue                              | 2 +-
 11 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 0739aef07..d20b9a553 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -284,6 +284,7 @@ hr {
       @apply shadow-lg;
 
       max-height: 256px;
+      min-width: 128px;
 
       button {
         @apply flex-1;
diff --git a/components/environments/edit-environment.vue b/components/environments/edit-environment.vue
index 685cb5a70..a85cbceca 100644
--- a/components/environments/edit-environment.vue
+++ b/components/environments/edit-environment.vue
@@ -30,7 +30,7 @@
       <ul
         v-for="(variable, index) in this.editingEnvCopy.variables"
         :key="index"
-        class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+        class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
         :class="{ 'border-t': index == 0 }"
       >
         <li>
diff --git a/components/http/http-headers.vue b/components/http/http-headers.vue
index 3d321c30d..dd15e41ec 100644
--- a/components/http/http-headers.vue
+++ b/components/http/http-headers.vue
@@ -19,7 +19,7 @@
     <ul
       v-for="(header, index) in headers"
       :key="`${header.value}_${index}`"
-      class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
       :class="{ 'border-t': index == 0 }"
     >
       <li>
diff --git a/components/http/http-parameters.vue b/components/http/http-parameters.vue
index adcf7b847..a61974c36 100644
--- a/components/http/http-parameters.vue
+++ b/components/http/http-parameters.vue
@@ -19,7 +19,7 @@
     <ul
       v-for="(param, index) in params"
       :key="index"
-      class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+      class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
       :class="{ 'border-t': index == 0 }"
     >
       <li>
diff --git a/components/realtime/socketio.vue b/components/realtime/socketio.vue
index 83d6fe2a9..921e0a14c 100644
--- a/components/realtime/socketio.vue
+++ b/components/realtime/socketio.vue
@@ -71,7 +71,7 @@
       <ul
         v-for="(input, index) of communication.inputs"
         :key="`input-${index}`"
-        class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+        class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
         :class="{ 'border-t': index == 0 }"
       >
         <li>
diff --git a/components/ui/accent-mode-picker.vue b/components/ui/accent-mode-picker.vue
index 3fde662a3..e75c79e64 100644
--- a/components/ui/accent-mode-picker.vue
+++ b/components/ui/accent-mode-picker.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col">
     <label>{{ $t("color") }}: {{ active.charAt(0).toUpperCase() + active.slice(1) }}</label>
-    <div class="space-x-2">
+    <div>
       <span
         v-for="(color, index) of colors"
         :key="`color-${index}`"
diff --git a/components/ui/color-mode-picker.vue b/components/ui/color-mode-picker.vue
index e17d97979..206a5d1dc 100644
--- a/components/ui/color-mode-picker.vue
+++ b/components/ui/color-mode-picker.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="flex flex-col">
     <label>
       <ColorScheme placeholder="..." tag="span">
         {{ $t("background") }}:
@@ -9,7 +9,7 @@
         </span>
       </ColorScheme>
     </label>
-    <div class="space-x-2">
+    <div>
       <span
         v-for="(color, index) of colors"
         :key="`color-${index}`"
diff --git a/components/ui/pw-toggle.vue b/components/ui/pw-toggle.vue
index e15654e21..a1640ac3d 100644
--- a/components/ui/pw-toggle.vue
+++ b/components/ui/pw-toggle.vue
@@ -29,6 +29,7 @@ $transition: all 0.2s ease-in-out;
   @apply p-0;
   @apply m-4;
   @apply cursor-pointer;
+  @apply flex-shrink-0;
 
   width: $width;
   height: $height;
diff --git a/components/ui/url-field.vue b/components/ui/url-field.vue
index a34f6ba7b..feee8d8d0 100644
--- a/components/ui/url-field.vue
+++ b/components/ui/url-field.vue
@@ -3,6 +3,12 @@
 </template>
 
 <style lang="scss">
+.url-field {
+  @apply border-dashed;
+  @apply md:border-l;
+  @apply border-brdColor;
+}
+
 .highlight-VAR {
   @apply font-bold;
   @apply text-acColor;
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 3d917e5c3..ab65fe88a 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -55,7 +55,7 @@
             <ul
               v-for="(header, index) in headers"
               :key="`${header.value}_${index}`"
-              class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+              class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
               :class="{ 'border-t': index == 0 }"
             >
               <li>
diff --git a/pages/index.vue b/pages/index.vue
index 48226f19e..f105d0b2a 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -171,7 +171,7 @@
               <ul
                 v-for="(param, index) in bodyParams"
                 :key="index"
-                class="border-b border-dashed divide-x border-brdColor divide-dashed divide-brdColor"
+                class="border-b border-dashed divide-y md:divide-x border-brdColor divide-dashed divide-brdColor md:divide-y-0"
                 :class="{ 'border-t': index == 0 }"
               >
                 <li>