fix: input borders

assets/scss/styles.scss

@@ -284,6 +284,7 @@ hr {
       @apply shadow-lg;
 
       max-height: 256px;
+      min-width: 128px;
 
       button {
         @apply flex-1;

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>

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>

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>

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>

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}`"

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}`"

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;

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;

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>

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>