From 5258db345e020d4072767667910540a7fdabf243 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Mon, 26 Jul 2021 12:40:02 +0530
Subject: [PATCH] refactor(ui): remaining realtime pages

---
 assets/scss/styles.scss                     |  20 +++-
 components/app/Header.vue                   |  11 +-
 components/app/Shortcuts.vue                |  20 ++++
 components/collections/graphql/index.vue    |  36 ++++---
 components/collections/index.vue            |  36 ++++---
 components/collections/my/Collection.vue    |   1 +
 components/collections/teams/Collection.vue |   1 +
 components/environments/Edit.vue            |   5 +-
 components/history/index.vue                |  32 +++---
 components/realtime/Mqtt.vue                |  92 +++++++++++------
 components/realtime/Socketio.vue            | 106 +++++++++++---------
 components/realtime/Sse.vue                 |   4 +-
 components/realtime/Websocket.vue           |  97 +++++++++---------
 components/teams/index.vue                  |   2 +-
 lang/en-US.json                             |   2 +
 pages/documentation.vue                     |   8 +-
 pages/graphql.vue                           |  32 +++---
 17 files changed, 305 insertions(+), 200 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index e9bec8e2a..5ccd57cab 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -171,6 +171,7 @@ hr {
   @apply border border-divider;
   @apply transition;
   @apply focus:(outline-none border-accent);
+  @apply disabled:cursor-not-allowed;
 }
 
 .input[type="file"],
@@ -187,7 +188,6 @@ pre.ace_editor {
 
 .select {
   @apply appearance-none;
-  @apply cursor-pointer;
 
   &::-ms-expand {
     @apply hidden;
@@ -197,6 +197,7 @@ pre.ace_editor {
 .select-wrapper {
   @apply relative;
   @apply w-full;
+  @apply cursor-pointer;
 
   &::after {
     @apply absolute;
@@ -211,6 +212,23 @@ pre.ace_editor {
   }
 }
 
+.search-wrapper {
+  @apply relative;
+  @apply w-full;
+
+  &::after {
+    @apply absolute;
+    @apply inline-block;
+    @apply pointer-events-none;
+    @apply font-icon;
+    @apply text-secondaryLight;
+    @apply top-2;
+    @apply left-3;
+
+    content: "\e8b6";
+  }
+}
+
 input[type="checkbox"] {
   @apply hidden;
 
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 8413a1a19..fc92b8f3c 100644
--- a/components/app/Header.vue
+++ b/components/app/Header.vue
@@ -1,9 +1,16 @@
 <template>
   <header class="flex flex-1 py-2 px-4 items-center justify-between">
     <div
-      class="font-extrabold space-x-2 flex-shrink-0 inline-flex items-center"
+      class="
+        font-extrabold
+        space-x-2
+        flex-shrink-0
+        text-sm
+        inline-flex
+        items-center
+      "
     >
-      <AppLogo class="h-6 mr-4" /> Hoppscotch
+      Hoppscotch
     </div>
     <div class="space-x-2 flex-shrink-0 inline-flex items-center">
       <AppGitHubStarButton class="mt-1 mr-2" />
diff --git a/components/app/Shortcuts.vue b/components/app/Shortcuts.vue
index 42fcf19e4..8a39eafb1 100644
--- a/components/app/Shortcuts.vue
+++ b/components/app/Shortcuts.vue
@@ -20,6 +20,25 @@
           <ButtonSecondary icon="close" @click.native="close()" />
         </div>
       </div>
+      <div class="search-wrapper">
+        <input
+          v-model="filterText"
+          type="search"
+          class="
+            bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-8
+            focus:outline-none
+            truncate
+          "
+          :placeholder="$t('search')"
+        />
+      </div>
       <div
         class="
           divide-y divide-dividerLight
@@ -67,6 +86,7 @@ export default {
   },
   data() {
     return {
+      filterText: "",
       mappings: [
         {
           section: "General",
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 3ee8ec5f5..46035345b 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -7,22 +7,26 @@
       class="flex flex-col top-8 z-10 sticky"
       :class="{ 'bg-primary': !savingMode }"
     >
-      <input
-        v-if="showCollActions"
-        v-model="filterText"
-        type="search"
-        :placeholder="$t('search')"
-        class="
-          bg-primaryLight
-          border-b border-dividerLight
-          flex
-          font-semibold font-mono
-          flex-1
-          py-2
-          px-4
-          focus:outline-none
-        "
-      />
+      <div class="search-wrapper">
+        <input
+          v-if="showCollActions"
+          v-model="filterText"
+          type="search"
+          :placeholder="$t('search')"
+          class="
+            bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-9
+            focus:outline-none
+            truncate
+          "
+        />
+      </div>
       <div class="border-b border-dividerLight flex flex-1 justify-between">
         <ButtonSecondary
           icon="add"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 682213f23..457491576 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -7,22 +7,26 @@
       class="bg-primary rounded-t flex flex-col top-0 z-10 sticky"
       :class="{ '!top-8': !saveRequest && !doc }"
     >
-      <input
-        v-if="!saveRequest"
-        v-model="filterText"
-        type="search"
-        :placeholder="$t('search')"
-        class="
-          bg-primaryLight
-          border-b border-dividerLight
-          flex
-          font-semibold font-mono
-          flex-1
-          py-2
-          px-4
-          focus:outline-none
-        "
-      />
+      <div class="search-wrapper">
+        <input
+          v-if="!saveRequest"
+          v-model="filterText"
+          type="search"
+          :placeholder="$t('search')"
+          class="
+            bg-primaryLight
+            border-b border-dividerLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-9
+            focus:outline-none
+            truncate
+          "
+        />
+      </div>
       <CollectionsChooseType
         :collections-type="collectionsType"
         :show="showTeamCollections"
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index bdadab88a..5d6448f78 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -46,6 +46,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('delete')"
         icon="check_box"
+        color="green"
         @click.native="$emit('unselect-collection')"
       />
       <ButtonSecondary
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index 810b4a8d4..668ae1085 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -38,6 +38,7 @@
         v-tippy="{ theme: 'tooltip' }"
         :title="$t('delete')"
         icon="check_box"
+        color="green"
         @click.native="$emit('unselect-collection')"
       />
       <ButtonSecondary
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 8fe89d222..f4dfc5fd7 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -38,15 +38,16 @@
             />
           </div>
         </div>
-        <div class="border-divider rounded border">
+        <div class="border-divider border rounded">
           <div
             v-for="(variable, index) in vars"
             :key="`variable-${index}`"
             class="
               divide-x divide-dashed divide-divider
-              border-b border-divider
+              border-b border-dashed border-divider
               flex
             "
+            :class="{ 'border-t': index == 0 }"
           >
             <input
               v-model="variable.key"
diff --git a/components/history/index.vue b/components/history/index.vue
index acdce9bc2..7c77e458f 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -10,20 +10,24 @@
         sticky
       "
     >
-      <input
-        v-model="filterText"
-        type="search"
-        class="
-          bg-primaryLight
-          flex
-          font-semibold font-mono
-          flex-1
-          py-2
-          px-4
-          focus:outline-none
-        "
-        :placeholder="$t('search')"
-      />
+      <div class="search-wrapper">
+        <input
+          v-model="filterText"
+          type="search"
+          class="
+            bg-primaryLight
+            flex
+            font-semibold font-mono
+            w-full
+            py-2
+            pr-2
+            pl-9
+            focus:outline-none
+            truncate
+          "
+          :placeholder="$t('search')"
+        />
+      </div>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
         data-testid="clear_history"
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index ec621e4e9..ab492ad25 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,8 +1,8 @@
 <template>
   <Splitpanes :dbl-click-splitter="false" vertical>
-    <Pane class="!overflow-auto hide-scrollbar">
+    <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes :dbl-click-splitter="false" horizontal>
-        <Pane class="!overflow-auto hide-scrollbar">
+        <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
               <div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="!overflow-auto hide-scrollbar">
+        <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="response">
             <RealtimeLog :title="$t('log')" :log="log" />
           </AppSection>
@@ -51,49 +51,75 @@
       max-size="35"
       size="25"
       min-size="20"
-      class="!overflow-auto hide-scrollbar"
+      class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
-        <input
-          id="pub_topic"
-          v-model="pub_topic"
-          class="input"
-          type="text"
-          spellcheck="false"
-        />
-        <label for="mqtt-message">{{ $t("message") }}</label>
-        <input
-          id="mqtt-message"
-          v-model="msg"
-          type="text"
-          spellcheck="false"
-          class="border-dashed border-divider input md:border-l"
-        />
-        <div>
-          <ButtonSecondary
+        <div class="flex flex-col flex-1 p-4 inline-flex">
+          <label for="pub_topic" class="font-semibold">
+            {{ $t("mqtt_topic") }}
+          </label>
+        </div>
+        <div class="flex px-4">
+          <input
+            id="pub_topic"
+            v-model="pub_topic"
+            class="input"
+            :placeholder="$t('topic_name')"
+            type="text"
+            spellcheck="false"
+          />
+        </div>
+        <div class="bg-primary flex flex-1 p-4 items-center justify-between">
+          <label for="mqtt-message" class="font-semibold">{{
+            $t("communication")
+          }}</label>
+        </div>
+        <div class="flex px-4">
+          <input
+            id="mqtt-message"
+            v-model="msg"
+            class="input !rounded-r-none"
+            type="text"
+            :placeholder="$t('message')"
+            spellcheck="false"
+          />
+          <ButtonPrimary
             id="publish"
             name="get"
+            class="rounded-l-none"
             :disabled="!canpublish"
             icon="send"
             :label="$t('mqtt_publish')"
             @click.native="publish"
           />
         </div>
-        <label for="sub_topic">{{ $t("mqtt_topic") }}</label>
-        <input
-          id="sub_topic"
-          v-model="sub_topic"
-          type="text"
-          spellcheck="false"
-          class="input md:rounded-bl-lg"
-        />
-        <div>
-          <ButtonSecondary
+        <div
+          class="
+            border-t border-dividerLight
+            flex flex-col flex-1
+            mt-4
+            p-4
+            inline-flex
+          "
+        >
+          <label for="sub_topic" class="font-semibold">{{
+            $t("mqtt_topic")
+          }}</label>
+        </div>
+        <div class="flex px-4">
+          <input
+            id="sub_topic"
+            v-model="sub_topic"
+            type="text"
+            :placeholder="$t('topic_name')"
+            spellcheck="false"
+            class="input !rounded-r-none"
+          />
+          <ButtonPrimary
             id="subscribe"
             name="get"
             :disabled="!cansubscribe"
-            class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
+            class="rounded-l-none"
             :icon="subscriptionState ? 'sync_disabled' : 'sync'"
             :label="
               subscriptionState ? $t('mqtt_unsubscribe') : $t('mqtt_subscribe')
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index a5d80d996..b99e8f4fb 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,8 +1,8 @@
 <template>
   <Splitpanes :dbl-click-splitter="false" vertical>
-    <Pane class="!overflow-auto hide-scrollbar">
+    <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes :dbl-click-splitter="false" horizontal>
-        <Pane class="!overflow-auto hide-scrollbar">
+        <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="request">
             <div class="bg-primary flex p-4 top-0 z-10 sticky">
               <div class="flex-1 inline-flex">
@@ -59,7 +59,7 @@
             </div>
           </AppSection>
         </Pane>
-        <Pane class="!overflow-auto hide-scrollbar">
+        <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="response">
             <RealtimeLog :title="$t('log')" :log="communication.log" />
           </AppSection>
@@ -71,63 +71,73 @@
       max-size="35"
       size="25"
       min-size="20"
-      class="!overflow-auto hide-scrollbar"
+      class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
-        <label for="event_name">{{ $t("event_name") }}</label>
-        <input
-          id="event_name"
-          v-model="communication.eventName"
-          class="input"
-          name="event_name"
-          type="text"
-          :readonly="!connectionState"
-        />
-        <div class="flex flex-1">
-          <label>{{ $t("message") }}s</label>
+        <div class="flex flex-col flex-1 p-4 inline-flex">
+          <label for="events" class="font-semibold">
+            {{ $t("events") }}
+          </label>
         </div>
-        <div
-          v-for="(input, index) of communication.inputs"
-          :key="`input-${index}`"
-          :class="{ 'border-t': index == 0 }"
-          class="
-            divide-y divide-dashed divide-divider
-            border-b border-dashed border-divider
-            md:divide-x md:divide-y-0
-          "
-        >
+        <div class="flex px-4">
           <input
-            v-model="communication.inputs[index]"
+            id="event_name"
+            v-model="communication.eventName"
             class="input"
-            name="message"
+            name="event_name"
+            :placeholder="$t('event_name')"
             type="text"
-            :readonly="!connectionState"
-            @keyup.enter="connectionState ? sendMessage() : null"
+            :disabled="!connectionState"
           />
-          <div v-if="index + 1 !== communication.inputs.length">
+        </div>
+        <div class="bg-primary flex flex-1 p-4 items-center justify-between">
+          <label class="font-semibold">{{ $t("communication") }}</label>
+          <div class="flex">
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
-              icon="delete"
-              color="red"
-              @click.native="removeCommunicationInput({ index })"
+              :title="$t('add_new')"
+              icon="add"
+              @click.native="addCommunicationInput"
             />
           </div>
-          <div v-if="index + 1 === communication.inputs.length">
-            <ButtonSecondary
-              id="send"
-              name="send"
-              :disabled="!connectionState"
-              icon="send"
-              :label="$t('send')"
-              @click.native="sendMessage"
-            />
+        </div>
+        <div class="flex flex-col space-y-2 px-4">
+          <div
+            v-for="(input, index) of communication.inputs"
+            :key="`input-${index}`"
+          >
+            <div class="flex">
+              <input
+                v-model="communication.inputs[index]"
+                class="input !rounded-r-none"
+                name="message"
+                :placeholder="$t('message_count', { count: index + 1 })"
+                type="text"
+                :disabled="!connectionState"
+                @keyup.enter="connectionState ? sendMessage() : null"
+              />
+              <ButtonSecondary
+                v-if="index + 1 !== communication.inputs.length"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('delete')"
+                icon="delete"
+                class="rounded-l-none"
+                color="red"
+                outline
+                @click.native="removeCommunicationInput({ index })"
+              />
+              <ButtonPrimary
+                v-if="index + 1 === communication.inputs.length"
+                id="send"
+                name="send"
+                :disabled="!connectionState"
+                class="rounded-l-none"
+                icon="send"
+                :label="$t('send')"
+                @click.native="sendMessage"
+              />
+            </div>
           </div>
-          <ButtonSecondary
-            icon="add"
-            :label="$t('add_new')"
-            @click.native="addCommunicationInput"
-          />
         </div>
       </AppSection>
     </Pane>
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 533219a88..c90d6d157 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,6 +1,6 @@
 <template>
   <Splitpanes :dbl-click-splitter="false" horizontal>
-    <Pane class="!overflow-auto hide-scrollbar">
+    <Pane class="hide-scrollbar !overflow-auto">
       <AppSection label="request">
         <div class="bg-primary flex p-4 top-0 z-10 sticky">
           <div class="flex-1 inline-flex">
@@ -39,7 +39,7 @@
         </div>
       </AppSection>
     </Pane>
-    <Pane class="!overflow-auto hide-scrollbar">
+    <Pane class="hide-scrollbar !overflow-auto">
       <AppSection label="response">
         <ul>
           <li>
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index a431efa79..3a8cee05c 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,42 +1,44 @@
 <template>
   <Splitpanes :dbl-click-splitter="false" vertical>
-    <Pane class="!overflow-auto hide-scrollbar">
+    <Pane class="hide-scrollbar !overflow-auto">
       <Splitpanes :dbl-click-splitter="false" horizontal>
-        <Pane class="!overflow-auto hide-scrollbar">
-          <AppSection class="bg-primary flex p-4 top-0 z-10 sticky">
-            <div class="flex-1 inline-flex">
-              <input
-                id="websocket-url"
-                v-model="url"
-                class="
-                  bg-primaryLight
-                  border border-divider
-                  rounded-l
-                  font-semibold font-mono
-                  text-secondaryDark
-                  w-full
-                  py-1
-                  px-4
-                  transition
-                  truncate
-                  focus:outline-none focus:border-accent
-                "
-                type="url"
-                spellcheck="false"
-                :class="{ error: !urlValid }"
-                :placeholder="$t('url')"
-                @keyup.enter="urlValid ? toggleConnection() : null"
-              />
-              <ButtonPrimary
-                id="connect"
-                :disabled="!urlValid"
-                class="rounded-l-none"
-                name="connect"
-                :icon="!connectionState ? 'sync' : 'sync_disabled'"
-                :label="!connectionState ? $t('connect') : $t('disconnect')"
-                reverse
-                @click.native="toggleConnection"
-              />
+        <Pane class="hide-scrollbar !overflow-auto">
+          <AppSection label="request">
+            <div class="bg-primary flex p-4 top-0 z-10 sticky">
+              <div class="flex-1 inline-flex">
+                <input
+                  id="websocket-url"
+                  v-model="url"
+                  class="
+                    bg-primaryLight
+                    border border-divider
+                    rounded-l
+                    font-semibold font-mono
+                    text-secondaryDark
+                    w-full
+                    py-1
+                    px-4
+                    transition
+                    truncate
+                    focus:outline-none focus:border-accent
+                  "
+                  type="url"
+                  spellcheck="false"
+                  :class="{ error: !urlValid }"
+                  :placeholder="$t('url')"
+                  @keyup.enter="urlValid ? toggleConnection() : null"
+                />
+                <ButtonPrimary
+                  id="connect"
+                  :disabled="!urlValid"
+                  class="rounded-l-none"
+                  name="connect"
+                  :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                  :label="!connectionState ? $t('connect') : $t('disconnect')"
+                  reverse
+                  @click.native="toggleConnection"
+                />
+              </div>
             </div>
           </AppSection>
           <div
@@ -45,7 +47,7 @@
               border-b border-dividerLight
               flex flex-1
               pl-4
-              top-68px
+              top-16
               z-10
               sticky
               items-center
@@ -131,7 +133,7 @@
             </div>
           </div>
         </Pane>
-        <Pane class="!overflow-auto hide-scrollbar">
+        <Pane class="hide-scrollbar !overflow-auto">
           <AppSection label="response">
             <RealtimeLog :title="$t('log')" :log="communication.log" />
           </AppSection>
@@ -143,31 +145,32 @@
       max-size="35"
       size="25"
       min-size="20"
-      class="!overflow-auto hide-scrollbar"
+      class="hide-scrollbar !overflow-auto"
     >
       <AppSection label="messages">
         <div class="flex flex-col flex-1 p-4 inline-flex">
-          <label for="websocket-message" class="font-semibold pb-4">
-            {{ $t("message") }}
+          <label for="websocket-message" class="font-semibold">
+            {{ $t("communication") }}
           </label>
+        </div>
+        <div class="flex px-4">
           <input
             id="websocket-message"
             v-model="communication.input"
             name="message"
             type="text"
-            :readonly="!connectionState"
-            class="input"
+            :disabled="!connectionState"
+            :placeholder="$t('message')"
+            class="input !rounded-r-none"
             @keyup.enter="connectionState ? sendMessage() : null"
             @keyup.up="connectionState ? walkHistory('up') : null"
             @keyup.down="connectionState ? walkHistory('down') : null"
           />
-        </div>
-        <div>
-          <ButtonSecondary
+          <ButtonPrimary
             id="send"
             name="send"
             :disabled="!connectionState"
-            class="rounded-b-lg button md:rounded-bl-none md:rounded-br-lg"
+            class="rounded-l-none"
             icon="send"
             :label="$t('send')"
             @click.native="sendMessage"
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 9cb0276ef..c6b82529c 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -38,7 +38,7 @@
     <p v-if="myTeams.length === 0">
       <i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
     </p>
-    <div v-else class="!overflow-auto hide-scrollbar">
+    <div v-else class="hide-scrollbar !overflow-auto">
       <ul class="flex-col">
         <li v-for="(team, index) in myTeams" :key="`team-${index}`">
           <TeamsTeam
diff --git a/lang/en-US.json b/lang/en-US.json
index e991f9515..164a67734 100644
--- a/lang/en-US.json
+++ b/lang/en-US.json
@@ -61,6 +61,7 @@
   "websocket": "WebSocket",
   "waiting_for_connection": "waiting for connection",
   "message": "Message",
+  "message_count": "Message {count}",
   "sse": "SSE",
   "server": "Server",
   "events": "Events",
@@ -272,6 +273,7 @@
   "event_name": "Event Name",
   "mqtt": "MQTT",
   "mqtt_topic": "Topic",
+  "topic_name": "Topic Name",
   "mqtt_topic_title": "Publish / Subscribe topic",
   "mqtt_publish": "Publish",
   "mqtt_subscribe": "Subscribe",
diff --git a/pages/documentation.vue b/pages/documentation.vue
index cfa9a6683..51ea3b529 100644
--- a/pages/documentation.vue
+++ b/pages/documentation.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <Splitpanes :dbl-click-splitter="false" vertical>
-      <Pane class="!overflow-auto hide-scrollbar">
+      <Pane class="hide-scrollbar !overflow-auto">
         <Splitpanes :dbl-click-splitter="false" horizontal>
-          <Pane class="!overflow-auto hide-scrollbar">
+          <Pane class="hide-scrollbar !overflow-auto">
             <AppSection label="import">
               <div class="flex flex-col">
                 <label>{{ $t("collection") }}</label>
@@ -57,7 +57,7 @@
               </div>
             </AppSection>
           </Pane>
-          <Pane class="!overflow-auto hide-scrollbar">
+          <Pane class="hide-scrollbar !overflow-auto">
             <AppSection label="documentation">
               <div class="flex flex-col">
                 <label>{{ $t("documentation") }}</label>
@@ -107,7 +107,7 @@
         max-size="35"
         size="25"
         min-size="20"
-        class="!overflow-auto hide-scrollbar"
+        class="hide-scrollbar !overflow-auto"
       >
         <aside>
           <Collections
diff --git a/pages/graphql.vue b/pages/graphql.vue
index c93709214..f6dff6d99 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -358,20 +358,24 @@
             <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
               <AppSection label="docs">
                 <div class="bg-primaryLight flex flex-col top-8 z-10 sticky">
-                  <input
-                    v-model="graphqlFieldsFilterText"
-                    type="text"
-                    :placeholder="$t('search')"
-                    class="
-                      bg-primaryLight
-                      flex
-                      font-semibold font-mono
-                      flex-1
-                      py-2
-                      px-4
-                      focus:outline-none
-                    "
-                  />
+                  <div class="search-wrapper">
+                    <input
+                      v-model="graphqlFieldsFilterText"
+                      type="search"
+                      :placeholder="$t('search')"
+                      class="
+                        bg-primaryLight
+                        flex
+                        font-semibold font-mono
+                        w-full
+                        py-2
+                        pr-2
+                        pl-9
+                        focus:outline-none
+                        truncate
+                      "
+                    />
+                  </div>
                 </div>
                 <SmartTabs
                   ref="gqlTabs"