From fc5a5aad8d93abf5fbd1555024ee6e1c80c74a72 Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Tue, 6 Jul 2021 17:31:18 +0000
Subject: [PATCH] feat: init split layouts

---
 assets/scss/styles.scss                       |  63 +-
 components/app/Section.vue                    |   2 +-
 components/collections/graphql/index.vue      |   2 +-
 components/collections/index.vue              |   4 +-
 components/environments/Edit.vue              |   2 +-
 components/environments/Environment.vue       |   2 +-
 components/environments/index.vue             |   2 +-
 components/history/index.vue                  |  22 +-
 components/http/BodyParameters.vue            |   2 +-
 components/http/CodegenModal.vue              |   2 +-
 components/http/Headers.vue                   |   2 +-
 components/http/Parameters.vue                |   2 +-
 components/http/RawBody.vue                   |   2 +-
 components/http/TokenList.vue                 |   4 +-
 components/landing/Hero.vue                   |   4 +-
 .../lenses/renderers/HTMLLensRenderer.vue     |   2 +-
 .../lenses/renderers/ImageLensRenderer.vue    |   2 +-
 .../lenses/renderers/JSONLensRenderer.vue     |   2 +-
 .../lenses/renderers/RawLensRenderer.vue      |   2 +-
 .../lenses/renderers/XMLLensRenderer.vue      |   2 +-
 components/realtime/Mqtt.vue                  | 227 ++---
 components/realtime/Socketio.vue              | 273 +++---
 components/realtime/Sse.vue                   |  89 +-
 components/realtime/Websocket.vue             | 312 ++++---
 components/smart/Modal.vue                    |   2 +-
 components/smart/Tabs.vue                     |   8 +-
 components/teams/Edit.vue                     |   4 +-
 components/teams/Team.vue                     |   2 +-
 components/teams/index.vue                    |   2 +-
 layouts/default.vue                           |  44 +-
 pages/api.vue                                 |  68 +-
 pages/doc.vue                                 | 214 ++---
 pages/graphql.vue                             | 856 +++++++++---------
 pages/realtime.vue                            |  35 +-
 pages/settings.vue                            |   2 +-
 35 files changed, 1204 insertions(+), 1061 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index fa1e28e3a..0dfc67663 100644
--- a/assets/scss/styles.scss
+++ b/assets/scss/styles.scss
@@ -178,8 +178,6 @@ select {
   @apply cursor-pointer;
   @apply appearance-none;
 
-  // height: 40px;
-
   &::-ms-expand {
     @apply hidden;
   }
@@ -295,3 +293,64 @@ input[type="checkbox"] {
     margin-bottom: env(safe-area-inset-bottom);
   }
 }
+
+.splitpanes__splitter {
+  @apply relative;
+  @apply bg-primaryLight;
+  @apply transition;
+}
+
+.splitpanes--vertical > .splitpanes__splitter {
+  @apply w-1;
+}
+
+.splitpanes--horizontal > .splitpanes__splitter {
+  @apply h-1;
+}
+
+.splitpanes__splitter::before {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-dividerLight;
+  @apply opacity-0;
+  @apply z-1;
+  @apply transition;
+
+  content: "";
+}
+
+.splitpanes__splitter::after {
+  @apply absolute;
+  @apply inset-0;
+  @apply z-1;
+  @apply transition;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply text-dividerDark;
+  @apply font-icon;
+}
+
+.splitpanes--vertical > .splitpanes__splitter::after {
+  content: "\e5d4";
+}
+
+.splitpanes--horizontal > .splitpanes__splitter::after {
+  content: "\e5d3";
+}
+
+.splitpanes__splitter:hover::before {
+  @apply opacity-100;
+}
+
+.splitpanes--vertical > .splitpanes__splitter::before {
+  left: -2px;
+  right: -2px;
+  height: 100%;
+}
+
+.splitpanes--horizontal > .splitpanes__splitter::before {
+  top: -2px;
+  bottom: -2px;
+  width: 100%;
+}
diff --git a/components/app/Section.vue b/components/app/Section.vue
index a9c197dd6..10a6a77ba 100644
--- a/components/app/Section.vue
+++ b/components/app/Section.vue
@@ -1,5 +1,5 @@
 <template>
-  <section :id="label.toLowerCase()">
+  <section :id="label.toLowerCase()" class="flex flex-col">
     <slot></slot>
   </section>
 </template>
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index f52f19b45..a64d942d4 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -45,7 +45,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b row-wrapper border-divider">
+    <div class="border-b flex flex-1 border-divider">
       <ButtonSecondary
         icon="new"
         :label="$t('new')"
diff --git a/components/collections/index.vue b/components/collections/index.vue
index 9c9471677..4b8fe4af0 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -7,7 +7,7 @@
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        class="input rounded-t-lg"
+        class="px-4 py-2 text-xs flex flex-1"
       />
     </div>
     <CollectionsChooseType
@@ -53,7 +53,7 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
-    <div class="border-b row-wrapper border-divider">
+    <div class="border-b flex flex-1 border-divider">
       <ButtonSecondary
         v-if="
           collectionsType.type == 'team-collections' &&
diff --git a/components/environments/Edit.vue b/components/environments/Edit.vue
index 3782cfc71..e2522afc8 100644
--- a/components/environments/Edit.vue
+++ b/components/environments/Edit.vue
@@ -16,7 +16,7 @@
         :placeholder="editingEnvironment.name"
         @keyup.enter="saveEnvironment"
       />
-      <div class="row-wrapper">
+      <div class="flex flex-1">
         <label for="variableList">{{ $t("env_variable_list") }}</label>
         <div>
           <ButtonSecondary
diff --git a/components/environments/Environment.vue b/components/environments/Environment.vue
index f3e945b1d..f02febe2c 100644
--- a/components/environments/Environment.vue
+++ b/components/environments/Environment.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <div>
         <ButtonSecondary
           icon="layers"
diff --git a/components/environments/index.vue b/components/environments/index.vue
index 703b3daab..8e510db90 100644
--- a/components/environments/index.vue
+++ b/components/environments/index.vue
@@ -35,7 +35,7 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b row-wrapper border-divider">
+    <div class="border-b flex flex-1 border-divider">
       <div>
         <ButtonSecondary
           icon="add"
diff --git a/components/history/index.vue b/components/history/index.vue
index a5ae5c190..b5243092e 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <AppSection label="history">
+  <AppSection label="history" class="bg-green-200">
     <div class="flex">
       <input
         v-model="filterText"
         aria-label="Search"
         type="search"
+        class="px-4 py-2 text-xs flex flex-1"
         :placeholder="$t('search')"
-        class="input rounded-t-lg"
       />
     </div>
     <div
@@ -39,8 +39,11 @@
     <p v-if="history.length === 0">
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
-    <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
-      <div v-if="!isClearingHistory" class="row-wrapper">
+    <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryLight">
+      <div
+        v-if="!isClearingHistory"
+        class="flex items-center justify-between flex-1"
+      >
         <ButtonSecondary
           data-testid="clear_history"
           :disabled="history.length === 0"
@@ -51,14 +54,15 @@
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
           :title="!showMore ? $t('show_more') : $t('hide_more')"
-          icon="!showMore ? 'unfold_more' : 'unfold_less'"
+          :icon="!showMore ? 'unfold_more' : 'unfold_less'"
           @click.native="toggleCollapse()"
         />
       </div>
-      <div v-else class="row-wrapper">
-        <p>
-          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
-        </p>
+      <div v-else class="flex items-center justify-between flex-1">
+        <span class="flex items-center">
+          <i class="material-icons mx-2">help_outline</i>
+          {{ $t("are_you_sure") }}
+        </span>
         <div>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
diff --git a/components/http/BodyParameters.vue b/components/http/BodyParameters.vue
index 5c59f7d10..131b6006b 100644
--- a/components/http/BodyParameters.vue
+++ b/components/http/BodyParameters.vue
@@ -2,7 +2,7 @@
   <div>
     <ul>
       <li>
-        <div class="row-wrapper">
+        <div class="flex flex-1">
           <label for="reqParamList">{{ $t("request_body") }}</label>
           <div>
             <ButtonSecondary
diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 1666e7a43..6a4f7b8ac 100644
--- a/components/http/CodegenModal.vue
+++ b/components/http/CodegenModal.vue
@@ -41,7 +41,7 @@
           />
         </tippy>
       </span>
-      <div class="row-wrapper">
+      <div class="flex flex-1">
         <label for="generatedCode">{{ $t("generated_code") }}</label>
         <div>
           <ButtonSecondary
diff --git a/components/http/Headers.vue b/components/http/Headers.vue
index 2cf36d458..e287ed6b4 100644
--- a/components/http/Headers.vue
+++ b/components/http/Headers.vue
@@ -2,7 +2,7 @@
   <AppSection label="headers">
     <ul v-if="headers.length !== 0">
       <li>
-        <div class="row-wrapper">
+        <div class="flex flex-1">
           <label for="headerList">{{ $t("header_list") }}</label>
           <div>
             <ButtonSecondary
diff --git a/components/http/Parameters.vue b/components/http/Parameters.vue
index 4a375d4cf..f169c1f4a 100644
--- a/components/http/Parameters.vue
+++ b/components/http/Parameters.vue
@@ -2,7 +2,7 @@
   <AppSection label="parameters">
     <ul v-if="params.length !== 0">
       <li>
-        <div class="row-wrapper">
+        <div class="flex flex-1">
           <label for="paramList">{{ $t("parameter_list") }}</label>
           <div>
             <ButtonSecondary
diff --git a/components/http/RawBody.vue b/components/http/RawBody.vue
index f2868c2e7..738094e77 100644
--- a/components/http/RawBody.vue
+++ b/components/http/RawBody.vue
@@ -2,7 +2,7 @@
   <div>
     <ul>
       <li>
-        <div class="row-wrapper">
+        <div class="flex flex-1">
           <label for="rawBody">{{ $t("raw_request_body") }}</label>
           <div>
             <ButtonSecondary
diff --git a/components/http/TokenList.vue b/components/http/TokenList.vue
index 9925b22fe..d4705b300 100644
--- a/components/http/TokenList.vue
+++ b/components/http/TokenList.vue
@@ -7,7 +7,7 @@
       </div>
     </template>
     <template #body>
-      <div class="row-wrapper">
+      <div class="flex flex-1">
         <label>{{ $t("token_list") }}</label>
         <div v-if="tokens.length != 0">
           <ButtonSecondary
@@ -35,7 +35,7 @@
         <li>
           <input class="input" :value="token.value" readonly />
         </li>
-        <div class="row-wrapper">
+        <div class="flex flex-1">
           <li>
             <ButtonSecondary
               v-tippy="{ theme: 'tooltip' }"
diff --git a/components/landing/Hero.vue b/components/landing/Hero.vue
index 393933881..05acbb9a9 100644
--- a/components/landing/Hero.vue
+++ b/components/landing/Hero.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex p-4 relative overflow-hidden">
+  <div class="flex p-4 relative">
     <div class="relative my-16 z-10 max-w-3xl">
       <h2
         class="
@@ -45,7 +45,7 @@
       </div>
     </div>
     <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2">
-      <LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:w-full lg:h-full" />
+      <LandingGlobe class="h-64 w-full sm:h-72 md:h-96 lg:h-full" />
     </div>
   </div>
 </template>
diff --git a/components/lenses/renderers/HTMLLensRenderer.vue b/components/lenses/renderers/HTMLLensRenderer.vue
index 9fa22c5ff..bf3bbcac5 100644
--- a/components/lenses/renderers/HTMLLensRenderer.vue
+++ b/components/lenses/renderers/HTMLLensRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <ButtonSecondary
diff --git a/components/lenses/renderers/ImageLensRenderer.vue b/components/lenses/renderers/ImageLensRenderer.vue
index 352578005..1adfe6f40 100644
--- a/components/lenses/renderers/ImageLensRenderer.vue
+++ b/components/lenses/renderers/ImageLensRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <ButtonSecondary
diff --git a/components/lenses/renderers/JSONLensRenderer.vue b/components/lenses/renderers/JSONLensRenderer.vue
index 4f2670eee..44eaa3b54 100644
--- a/components/lenses/renderers/JSONLensRenderer.vue
+++ b/components/lenses/renderers/JSONLensRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <ButtonSecondary
diff --git a/components/lenses/renderers/RawLensRenderer.vue b/components/lenses/renderers/RawLensRenderer.vue
index 8e5a99ac6..696a708d3 100644
--- a/components/lenses/renderers/RawLensRenderer.vue
+++ b/components/lenses/renderers/RawLensRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <ButtonSecondary
diff --git a/components/lenses/renderers/XMLLensRenderer.vue b/components/lenses/renderers/XMLLensRenderer.vue
index 86c2ae49e..21591b802 100644
--- a/components/lenses/renderers/XMLLensRenderer.vue
+++ b/components/lenses/renderers/XMLLensRenderer.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <label for="body">{{ $t("response_body") }}</label>
       <div>
         <ButtonSecondary
diff --git a/components/realtime/Mqtt.vue b/components/realtime/Mqtt.vue
index 73a825d38..ecce3de2f 100644
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,114 +1,139 @@
 <template>
   <div>
-    <AppSection label="request">
-      <ul>
-        <li>
-          <label for="mqtt-url">{{ $t("url") }}</label>
-          <input
-            id="mqtt-url"
-            v-model="url"
-            type="url"
-            spellcheck="false"
-            class="input md:rounded-bl-lg"
-            :placeholder="$t('url')"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="connect"
-              :disabled="!validUrl"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
-              :icon="!connectionState ? 'sync' : 'sync_disabled'"
-              :label="connectionState ? $t('disconnect') : $t('connect')"
-              reverse
-              @click.native="toggleConnection"
-            />
-          </li>
-        </div>
-      </ul>
-    </AppSection>
-
-    <AppSection label="response">
-      <ul>
-        <li>
-          <RealtimeLog :title="$t('log')" :log="log" />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
-          <input
-            id="pub_topic"
-            v-model="pub_topic"
-            class="input"
-            type="text"
-            spellcheck="false"
-          />
-        </li>
-        <li>
-          <label for="mqtt-message">{{ $t("message") }}</label>
-          <input
-            id="mqtt-message"
-            v-model="msg"
-            type="text"
-            spellcheck="false"
-            class="input border-dashed md:border-l border-divider"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="publish"
-              class="button"
-              name="get"
-              :disabled="!canpublish"
-              icon="send"
-              :label="$t('mqtt_publish')"
-              @click.native="publish"
-            />
-          </li>
-        </div>
-      </ul>
-      <ul>
-        <li>
-          <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"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="subscribe"
-              name="get"
-              :disabled="!cansubscribe"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
-              :icon="subscriptionState ? 'sync_disabled' : 'sync'"
-              :label="
-                subscriptionState
-                  ? $t('mqtt_unsubscribe')
-                  : $t('mqtt_subscribe')
-              "
-              reverse
-              @click.native="toggleSubscription"
-            />
-          </li>
-        </div>
-      </ul>
-    </AppSection>
+    <Splitpanes vertical :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <Splitpanes horizontal :dbl-click-splitter="false">
+          <Pane class="overflow-auto">
+            <AppSection label="request">
+              <ul>
+                <li>
+                  <label for="mqtt-url">{{ $t("url") }}</label>
+                  <input
+                    id="mqtt-url"
+                    v-model="url"
+                    type="url"
+                    spellcheck="false"
+                    class="input md:rounded-bl-lg"
+                    :placeholder="$t('url')"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <ButtonSecondary
+                      id="connect"
+                      :disabled="!validUrl"
+                      class="
+                        button
+                        rounded-b-lg
+                        md:rounded-bl-none md:rounded-br-lg
+                      "
+                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                      :label="
+                        connectionState ? $t('disconnect') : $t('connect')
+                      "
+                      reverse
+                      @click.native="toggleConnection"
+                    />
+                  </li>
+                </div>
+              </ul>
+            </AppSection>
+          </Pane>
+          <Pane class="overflow-auto">
+            <AppSection label="response">
+              <ul>
+                <li>
+                  <RealtimeLog :title="$t('log')" :log="log" />
+                </li>
+              </ul>
+            </AppSection>
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
+        <AppSection label="messages">
+          <ul>
+            <li>
+              <label for="pub_topic">{{ $t("mqtt_topic") }}</label>
+              <input
+                id="pub_topic"
+                v-model="pub_topic"
+                class="input"
+                type="text"
+                spellcheck="false"
+              />
+            </li>
+            <li>
+              <label for="mqtt-message">{{ $t("message") }}</label>
+              <input
+                id="mqtt-message"
+                v-model="msg"
+                type="text"
+                spellcheck="false"
+                class="input border-dashed md:border-l border-divider"
+              />
+            </li>
+            <div>
+              <li>
+                <ButtonSecondary
+                  id="publish"
+                  class="button"
+                  name="get"
+                  :disabled="!canpublish"
+                  icon="send"
+                  :label="$t('mqtt_publish')"
+                  @click.native="publish"
+                />
+              </li>
+            </div>
+          </ul>
+          <ul>
+            <li>
+              <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"
+              />
+            </li>
+            <div>
+              <li>
+                <ButtonSecondary
+                  id="subscribe"
+                  name="get"
+                  :disabled="!cansubscribe"
+                  class="
+                    button
+                    rounded-b-lg
+                    md:rounded-bl-none md:rounded-br-lg
+                  "
+                  :icon="subscriptionState ? 'sync_disabled' : 'sync'"
+                  :label="
+                    subscriptionState
+                      ? $t('mqtt_unsubscribe')
+                      : $t('mqtt_subscribe')
+                  "
+                  reverse
+                  @click.native="toggleSubscription"
+                />
+              </li>
+            </div>
+          </ul>
+        </AppSection>
+      </Pane>
+    </Splitpanes>
   </div>
 </template>
 
 <script>
+import { Splitpanes, Pane } from "splitpanes"
 import Paho from "paho-mqtt"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
+  components: { Splitpanes, Pane },
   data() {
     return {
       url: "wss://test.mosquitto.org:8081",
diff --git a/components/realtime/Socketio.vue b/components/realtime/Socketio.vue
index ffa844aa2..d1cfd05ef 100644
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,140 +1,161 @@
 <template>
   <div>
-    <AppSection label="request">
-      <ul>
-        <li>
-          <label for="socketio-url">{{ $t("url") }}</label>
-          <input
-            id="socketio-url"
-            v-model="url"
-            type="url"
-            spellcheck="false"
-            :class="{ error: !urlValid }"
-            class="input md:rounded-bl-lg"
-            :placeholder="$t('url')"
-            @keyup.enter="urlValid ? toggleConnection() : null"
-          />
-        </li>
-        <div>
-          <li>
-            <label for="socketio-path">{{ $t("path") }}</label>
-            <input
-              id="socketio-path"
-              v-model="path"
-              class="input"
-              spellcheck="false"
-            />
-          </li>
-        </div>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="connect"
-              :disabled="!urlValid"
-              name="connect"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
-              :icon="!connectionState ? 'sync' : 'sync_disabled'"
-              :label="!connectionState ? $t('connect') : $t('disconnect')"
-              reverse
-              @click.native="toggleConnection"
-            />
-          </li>
-        </div>
-      </ul>
-    </AppSection>
-
-    <AppSection label="response">
-      <ul>
-        <li>
-          <RealtimeLog :title="$t('log')" :log="communication.log" />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <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"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label>{{ $t("message") }}s</label>
-          </div>
-        </li>
-      </ul>
-      <ul
-        v-for="(input, index) of communication.inputs"
-        :key="`input-${index}`"
-        :class="{ 'border-t': index == 0 }"
-        class="
-          border-b border-dashed
-          divide-y
-          md:divide-x
-          border-divider
-          divide-dashed divide-divider
-          md:divide-y-0
-        "
-      >
-        <li>
-          <input
-            v-model="communication.inputs[index]"
-            class="input"
-            name="message"
-            type="text"
-            :readonly="!connectionState"
-            @keyup.enter="connectionState ? sendMessage() : null"
-          />
-        </li>
-        <div v-if="index + 1 !== communication.inputs.length">
-          <li>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
-              icon="delete"
-              @click.native="removeCommunicationInput({ index })"
-            />
-          </li>
-        </div>
-        <div v-if="index + 1 === communication.inputs.length">
-          <li>
-            <ButtonSecondary
-              id="send"
-              class="button"
-              name="send"
-              :disabled="!connectionState"
-              icon="send"
-              :label="$t('send')"
-              @click.native="sendMessage"
-            />
-          </li>
-        </div>
-      </ul>
-      <ul>
-        <li>
-          <ButtonSecondary
-            icon="add"
-            :label="$t('add_new')"
-            @click.native="addCommunicationInput"
-          />
-        </li>
-      </ul>
-    </AppSection>
+    <Splitpanes vertical :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <Splitpanes horizontal :dbl-click-splitter="false">
+          <Pane class="overflow-auto">
+            <AppSection label="request">
+              <ul>
+                <li>
+                  <label for="socketio-url">{{ $t("url") }}</label>
+                  <input
+                    id="socketio-url"
+                    v-model="url"
+                    type="url"
+                    spellcheck="false"
+                    :class="{ error: !urlValid }"
+                    class="input md:rounded-bl-lg"
+                    :placeholder="$t('url')"
+                    @keyup.enter="urlValid ? toggleConnection() : null"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <label for="socketio-path">{{ $t("path") }}</label>
+                    <input
+                      id="socketio-path"
+                      v-model="path"
+                      class="input"
+                      spellcheck="false"
+                    />
+                  </li>
+                </div>
+                <div>
+                  <li>
+                    <ButtonSecondary
+                      id="connect"
+                      :disabled="!urlValid"
+                      name="connect"
+                      class="
+                        button
+                        rounded-b-lg
+                        md:rounded-bl-none md:rounded-br-lg
+                      "
+                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                      :label="
+                        !connectionState ? $t('connect') : $t('disconnect')
+                      "
+                      reverse
+                      @click.native="toggleConnection"
+                    />
+                  </li>
+                </div>
+              </ul>
+            </AppSection>
+          </Pane>
+          <Pane class="overflow-auto">
+            <AppSection label="response">
+              <ul>
+                <li>
+                  <RealtimeLog :title="$t('log')" :log="communication.log" />
+                </li>
+              </ul>
+            </AppSection>
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
+        <AppSection label="messages">
+          <ul>
+            <li>
+              <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"
+              />
+            </li>
+          </ul>
+          <ul>
+            <li>
+              <div class="flex flex-1">
+                <label>{{ $t("message") }}s</label>
+              </div>
+            </li>
+          </ul>
+          <ul
+            v-for="(input, index) of communication.inputs"
+            :key="`input-${index}`"
+            :class="{ 'border-t': index == 0 }"
+            class="
+              border-b border-dashed
+              divide-y
+              md:divide-x
+              border-divider
+              divide-dashed divide-divider
+              md:divide-y-0
+            "
+          >
+            <li>
+              <input
+                v-model="communication.inputs[index]"
+                class="input"
+                name="message"
+                type="text"
+                :readonly="!connectionState"
+                @keyup.enter="connectionState ? sendMessage() : null"
+              />
+            </li>
+            <div v-if="index + 1 !== communication.inputs.length">
+              <li>
+                <ButtonSecondary
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('delete')"
+                  icon="delete"
+                  @click.native="removeCommunicationInput({ index })"
+                />
+              </li>
+            </div>
+            <div v-if="index + 1 === communication.inputs.length">
+              <li>
+                <ButtonSecondary
+                  id="send"
+                  class="button"
+                  name="send"
+                  :disabled="!connectionState"
+                  icon="send"
+                  :label="$t('send')"
+                  @click.native="sendMessage"
+                />
+              </li>
+            </div>
+          </ul>
+          <ul>
+            <li>
+              <ButtonSecondary
+                icon="add"
+                :label="$t('add_new')"
+                @click.native="addCommunicationInput"
+              />
+            </li>
+          </ul>
+        </AppSection>
+      </Pane>
+    </Splitpanes>
   </div>
 </template>
 
 <script>
+import { Splitpanes, Pane } from "splitpanes"
 import { io as Client } from "socket.io-client"
 import wildcard from "socketio-wildcard"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
+  components: { Splitpanes, Pane },
   data() {
     return {
       url: "wss://main-daxrc78qyb411dls-gtw.qovery.io",
diff --git a/components/realtime/Sse.vue b/components/realtime/Sse.vue
index 8ca65c6f7..941ef7a80 100644
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,51 +1,62 @@
 <template>
   <div>
-    <AppSection label="request">
-      <ul>
-        <li>
-          <label for="server">{{ $t("server") }}</label>
-          <input
-            id="server"
-            v-model="server"
-            type="url"
-            :class="{ error: !serverValid }"
-            class="input md:rounded-bl-lg"
-            :placeholder="$t('url')"
-            @keyup.enter="serverValid ? toggleSSEConnection() : null"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="start"
-              :disabled="!serverValid"
-              name="start"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
-              :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
-              :label="!connectionSSEState ? $t('start') : $t('stop')"
-              reverse
-              @click.native="toggleSSEConnection"
-            />
-          </li>
-        </div>
-      </ul>
-    </AppSection>
-
-    <AppSection label="response">
-      <ul>
-        <li>
-          <RealtimeLog :title="$t('events')" :log="events.log" />
-          <div id="result"></div>
-        </li>
-      </ul>
-    </AppSection>
+    <Splitpanes horizontal :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <AppSection label="request">
+          <ul>
+            <li>
+              <label for="server">{{ $t("server") }}</label>
+              <input
+                id="server"
+                v-model="server"
+                type="url"
+                :class="{ error: !serverValid }"
+                class="input md:rounded-bl-lg"
+                :placeholder="$t('url')"
+                @keyup.enter="serverValid ? toggleSSEConnection() : null"
+              />
+            </li>
+            <div>
+              <li>
+                <ButtonSecondary
+                  id="start"
+                  :disabled="!serverValid"
+                  name="start"
+                  class="
+                    button
+                    rounded-b-lg
+                    md:rounded-bl-none md:rounded-br-lg
+                  "
+                  :icon="!connectionSSEState ? 'sync' : 'sync_disabled'"
+                  :label="!connectionSSEState ? $t('start') : $t('stop')"
+                  reverse
+                  @click.native="toggleSSEConnection"
+                />
+              </li>
+            </div>
+          </ul>
+        </AppSection>
+      </Pane>
+      <Pane class="overflow-auto">
+        <AppSection label="response">
+          <ul>
+            <li>
+              <RealtimeLog :title="$t('events')" :log="events.log" />
+              <div id="result"></div>
+            </li>
+          </ul>
+        </AppSection>
+      </Pane>
+    </Splitpanes>
   </div>
 </template>
 
 <script>
+import { Splitpanes, Pane } from "splitpanes"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
+  components: { Splitpanes, Pane },
   data() {
     return {
       connectionSSEState: false,
diff --git a/components/realtime/Websocket.vue b/components/realtime/Websocket.vue
index 1ed2e65d7..254157216 100644
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,157 +1,179 @@
 <template>
   <div>
-    <AppSection label="request">
-      <ul>
-        <li>
-          <label for="websocket-url">{{ $t("url") }}</label>
-          <input
-            id="websocket-url"
-            v-model="url"
-            class="input"
-            type="url"
-            spellcheck="false"
-            :class="{ error: !urlValid }"
-            :placeholder="$t('url')"
-            @keyup.enter="urlValid ? toggleConnection() : null"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="connect"
-              :disabled="!urlValid"
-              class="button"
-              name="connect"
-              :icon="!connectionState ? 'sync' : 'sync_disabled'"
-              :label="!connectionState ? $t('connect') : $t('disconnect')"
-              reverse
-              @click.native="toggleConnection"
-            />
-          </li>
-        </div>
-      </ul>
-      <ul>
-        <li>
-          <div class="row-wrapper">
-            <label>{{ $t("protocols") }}</label>
-          </div>
-        </li>
-      </ul>
-      <ul
-        v-for="(protocol, index) of protocols"
-        :key="`protocol-${index}`"
-        :class="{ 'border-t': index == 0 }"
-        class="
-          border-b border-dashed
-          divide-y
-          md:divide-x
-          border-divider
-          divide-dashed divide-divider
-          md:divide-y-0
-        "
-      >
-        <li>
-          <input
-            v-model="protocol.value"
-            class="input"
-            :placeholder="$t('protocol_count', { count: index + 1 })"
-            name="message"
-            type="text"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="
-                protocol.hasOwnProperty('active')
-                  ? protocol.active
-                    ? $t('turn_off')
-                    : $t('turn_on')
-                  : $t('turn_off')
-              "
-              @click.native="
-                protocol.active = protocol.hasOwnProperty('active')
-                  ? !protocol.active
-                  : false
-              "
-            />
-            <i class="material-icons">
-              {{
-                protocol.hasOwnProperty("active")
-                  ? protocol.active
-                    ? "check_box"
-                    : "check_box_outline_blank"
-                  : "check_box"
-              }}
-            </i>
-          </li>
-        </div>
-        <div>
-          <li>
-            <ButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="$t('delete')"
-              icon="delete"
-              @click.native="deleteProtocol({ index })"
-            />
-          </li>
-        </div>
-      </ul>
-      <ul>
-        <li>
-          <ButtonSecondary
-            icon="add"
-            :label="$t('add_new')"
-            @click.native="addProtocol"
-          />
-        </li>
-      </ul>
-    </AppSection>
-
-    <AppSection label="response">
-      <ul>
-        <li>
-          <RealtimeLog :title="$t('log')" :log="communication.log" />
-        </li>
-      </ul>
-      <ul>
-        <li>
-          <label for="websocket-message">{{ $t("message") }}</label>
-          <input
-            id="websocket-message"
-            v-model="communication.input"
-            name="message"
-            type="text"
-            :readonly="!connectionState"
-            class="input md:rounded-bl-lg"
-            @keyup.enter="connectionState ? sendMessage() : null"
-            @keyup.up="connectionState ? walkHistory('up') : null"
-            @keyup.down="connectionState ? walkHistory('down') : null"
-          />
-        </li>
-        <div>
-          <li>
-            <ButtonSecondary
-              id="send"
-              name="send"
-              :disabled="!connectionState"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
-              icon="send"
-              :label="$t('send')"
-              @click.native="sendMessage"
-            />
-          </li>
-        </div>
-      </ul>
-    </AppSection>
+    <Splitpanes vertical :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <Splitpanes horizontal :dbl-click-splitter="false">
+          <Pane class="overflow-auto">
+            <AppSection label="request">
+              <ul>
+                <li>
+                  <label for="websocket-url">{{ $t("url") }}</label>
+                  <input
+                    id="websocket-url"
+                    v-model="url"
+                    class="input"
+                    type="url"
+                    spellcheck="false"
+                    :class="{ error: !urlValid }"
+                    :placeholder="$t('url')"
+                    @keyup.enter="urlValid ? toggleConnection() : null"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <ButtonSecondary
+                      id="connect"
+                      :disabled="!urlValid"
+                      class="button"
+                      name="connect"
+                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
+                      :label="
+                        !connectionState ? $t('connect') : $t('disconnect')
+                      "
+                      reverse
+                      @click.native="toggleConnection"
+                    />
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <div class="flex flex-1">
+                    <label>{{ $t("protocols") }}</label>
+                  </div>
+                </li>
+              </ul>
+              <ul
+                v-for="(protocol, index) of protocols"
+                :key="`protocol-${index}`"
+                :class="{ 'border-t': index == 0 }"
+                class="
+                  border-b border-dashed
+                  divide-y
+                  md:divide-x
+                  border-divider
+                  divide-dashed divide-divider
+                  md:divide-y-0
+                "
+              >
+                <li>
+                  <input
+                    v-model="protocol.value"
+                    class="input"
+                    :placeholder="$t('protocol_count', { count: index + 1 })"
+                    name="message"
+                    type="text"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <ButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="
+                        protocol.hasOwnProperty('active')
+                          ? protocol.active
+                            ? $t('turn_off')
+                            : $t('turn_on')
+                          : $t('turn_off')
+                      "
+                      @click.native="
+                        protocol.active = protocol.hasOwnProperty('active')
+                          ? !protocol.active
+                          : false
+                      "
+                    />
+                    <i class="material-icons">
+                      {{
+                        protocol.hasOwnProperty("active")
+                          ? protocol.active
+                            ? "check_box"
+                            : "check_box_outline_blank"
+                          : "check_box"
+                      }}
+                    </i>
+                  </li>
+                </div>
+                <div>
+                  <li>
+                    <ButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('delete')"
+                      icon="delete"
+                      @click.native="deleteProtocol({ index })"
+                    />
+                  </li>
+                </div>
+              </ul>
+              <ul>
+                <li>
+                  <ButtonSecondary
+                    icon="add"
+                    :label="$t('add_new')"
+                    @click.native="addProtocol"
+                  />
+                </li>
+              </ul>
+            </AppSection>
+          </Pane>
+          <Pane class="overflow-auto">
+            <AppSection label="response">
+              <ul>
+                <li>
+                  <RealtimeLog :title="$t('log')" :log="communication.log" />
+                </li>
+              </ul>
+            </AppSection>
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
+        <AppSection label="messages">
+          <ul>
+            <li>
+              <label for="websocket-message">{{ $t("message") }}</label>
+              <input
+                id="websocket-message"
+                v-model="communication.input"
+                name="message"
+                type="text"
+                :readonly="!connectionState"
+                class="input md:rounded-bl-lg"
+                @keyup.enter="connectionState ? sendMessage() : null"
+                @keyup.up="connectionState ? walkHistory('up') : null"
+                @keyup.down="connectionState ? walkHistory('down') : null"
+              />
+            </li>
+            <div>
+              <li>
+                <ButtonSecondary
+                  id="send"
+                  name="send"
+                  :disabled="!connectionState"
+                  class="
+                    button
+                    rounded-b-lg
+                    md:rounded-bl-none md:rounded-br-lg
+                  "
+                  icon="send"
+                  :label="$t('send')"
+                  @click.native="sendMessage"
+                />
+              </li>
+            </div>
+          </ul>
+        </AppSection>
+      </Pane>
+    </Splitpanes>
   </div>
 </template>
 
 <script>
+import { Splitpanes, Pane } from "splitpanes"
 import debounce from "~/helpers/utils/debounce"
+import "splitpanes/dist/splitpanes.css"
 
 export default {
+  components: { Splitpanes, Pane },
   data() {
     return {
       connectionState: false,
diff --git a/components/smart/Modal.vue b/components/smart/Modal.vue
index b54559993..5d557287e 100644
--- a/components/smart/Modal.vue
+++ b/components/smart/Modal.vue
@@ -44,7 +44,7 @@
           </div>
         </div>
         <div v-if="hasFooterSlot" class="p-2">
-          <div class="row-wrapper">
+          <div class="flex flex-1">
             <slot name="footer"></slot>
           </div>
         </div>
diff --git a/components/smart/Tabs.vue b/components/smart/Tabs.vue
index 74425a693..be7df3e6d 100644
--- a/components/smart/Tabs.vue
+++ b/components/smart/Tabs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tabs-wrapper">
+  <div class="tabs-wrapper bg-blue-300">
     <div class="tabs" :class="styles">
       <div class="flex w-0">
         <div class="inline-flex">
@@ -65,17 +65,19 @@ export default {
 
   .tabs {
     @apply flex;
+    @apply flex-1;
     @apply whitespace-nowrap;
     @apply overflow-auto;
-    @apply mt-4;
 
     .tab {
       @apply flex;
       @apply items-center;
       @apply justify-center;
-      @apply p-3;
+      @apply px-4;
+      @apply py-2;
       @apply text-secondaryLight;
       @apply font-semibold;
+      @apply text-xs;
       @apply cursor-pointer;
       @apply transition;
       @apply border-b-2;
diff --git a/components/teams/Edit.vue b/components/teams/Edit.vue
index d2697f733..c6bbf56e8 100644
--- a/components/teams/Edit.vue
+++ b/components/teams/Edit.vue
@@ -7,7 +7,7 @@
     <template #body>
       <ul>
         <li>
-          <div class="row-wrapper">
+          <div class="flex flex-1">
             <label>{{ $t("label") }}</label>
           </div>
         </li>
@@ -25,7 +25,7 @@
       </ul>
       <ul>
         <li>
-          <div class="row-wrapper">
+          <div class="flex flex-1">
             <label for="memberList">{{ $t("team_member_list") }}</label>
             <div></div>
           </div>
diff --git a/components/teams/Team.vue b/components/teams/Team.vue
index fb6128861..8e1c9226e 100644
--- a/components/teams/Team.vue
+++ b/components/teams/Team.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="row-wrapper">
+  <div class="flex flex-1">
     <div>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
diff --git a/components/teams/index.vue b/components/teams/index.vue
index 3d759cf6e..a94cf16a4 100644
--- a/components/teams/index.vue
+++ b/components/teams/index.vue
@@ -23,7 +23,7 @@
       :editingteam-i-d="editingteamID"
       @hide-modal="displayModalEdit(false)"
     />
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <div>
         <ButtonSecondary
           icon="add"
diff --git a/layouts/default.vue b/layouts/default.vue
index e1e082d4e..2f05e6649 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,36 +1,28 @@
 <template>
   <div class="flex h-screen w-screen">
-    <Splitpanes horizontal class="hoppscotch-theme">
-      <Pane class="flex-1">
-        <Splitpanes vertical class="hoppscotch-theme">
+    <Splitpanes horizontal :dbl-click-splitter="false">
+      <Pane class="flex flex-1 overflow-auto">
+        <Splitpanes vertical :dbl-click-splitter="false">
           <Pane
             v-if="!hideNavigationPane"
             style="width: auto"
-            class="overflow-y-auto bg-primaryLight flex items-stretch"
+            class="overflow-auto"
           >
             <AppSidenav />
           </Pane>
-          <Pane class="flex-1">
-            <Splitpanes
-              horizontal
-              :push-other-panes="false"
-              class="hoppscotch-theme"
-            >
-              <Pane v-if="!zenMode" style="height: auto">
+          <Pane class="flex flex-1 overflow-auto">
+            <Splitpanes horizontal :dbl-click-splitter="false">
+              <Pane v-if="!zenMode" style="height: auto" class="overflow-auto">
                 <AppHeader />
               </Pane>
-              <Pane class="flex-1">
-                <Splitpanes vertical class="hoppscotch-theme">
-                  <Pane class="overflow-y-auto">
-                    <nuxt class="container" :hide-right-pane="hideRightPane" />
-                  </Pane>
-                </Splitpanes>
+              <Pane class="flex flex-1 overflow-auto">
+                <nuxt class="container" :hide-right-pane="hideRightPane" />
               </Pane>
             </Splitpanes>
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane style="height: auto" class="bg-primaryDark">
+      <Pane style="height: auto" class="overflow-auto">
         <div class="flex justify-between">
           <div>
             <ButtonSecondary
@@ -56,13 +48,15 @@
               @click.native="zenMode = !zenMode"
             />
           </div>
-          <ButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
-            icon="menu_open"
-            :class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
-            @click.native="hideRightPane = !hideRightPane"
-          />
+          <div>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
+              icon="menu_open"
+              :class="['transform rotate-180', { ' rotate-0': hideRightPane }]"
+              @click.native="hideRightPane = !hideRightPane"
+            />
+          </div>
         </div>
       </Pane>
     </Splitpanes>
diff --git a/pages/api.vue b/pages/api.vue
index 4781437a5..05dc95784 100644
--- a/pages/api.vue
+++ b/pages/api.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- eslint-disable -->
   <div>
-    <Splitpanes vertical class="hoppscotch-theme">
-      <Pane min-size="60" class="bg-violet-100">
-        <Splitpanes horizontal class="hoppscotch-theme">
-          <Pane class="bg-indigo-100">
+    <Splitpanes vertical :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <Splitpanes horizontal :dbl-click-splitter="false">
+          <Pane class="overflow-auto">
             <AppSection ref="request" label="request">
               <ul>
                 <li class="shrink">
@@ -142,7 +142,7 @@
                 </ul>
                 <ul>
                   <li>
-                    <div class="row-wrapper">
+                    <div class="flex flex-1">
                       <span>
                         <SmartToggle
                           v-if="canListParameters"
@@ -175,7 +175,7 @@
                   "
                 />
               </div>
-              <div class="row-wrapper">
+              <div class="flex flex-1">
                 <span>
                   <ButtonSecondary
                     @click.native="showCurlImportModal = !showCurlImportModal"
@@ -262,7 +262,7 @@
                   <AppSection label="authentication">
                     <ul>
                       <li>
-                        <div class="row-wrapper">
+                        <div class="flex flex-1">
                           <label for="auth">{{ $t("authentication") }}</label>
                           <div>
                             <ButtonSecondary
@@ -317,7 +317,7 @@
                     </ul>
                     <ul v-if="auth === 'Bearer Token' || auth === 'OAuth 2.0'">
                       <li>
-                        <div class="row-wrapper">
+                        <div class="flex flex-1">
                           <input
                             class="input"
                             placeholder="Token"
@@ -343,7 +343,7 @@
                         </div>
                       </li>
                     </ul>
-                    <div class="row-wrapper">
+                    <div class="flex flex-1">
                       <SmartToggle
                         :on="!URL_EXCLUDES.auth"
                         @change="setExclude('auth', !$event)"
@@ -359,7 +359,7 @@
                   >
                     <ul>
                       <li>
-                        <div class="row-wrapper">
+                        <div class="flex flex-1">
                           <label for="token-name">{{ $t("token_name") }}</label>
                           <div>
                             <ButtonSecondary
@@ -487,7 +487,7 @@
                   <AppSection v-if="showPreRequestScript" label="preRequest">
                     <ul>
                       <li>
-                        <div class="row-wrapper">
+                        <div class="flex flex-1">
                           <label>{{ $t("javascript_code") }}</label>
                           <div>
                             <ButtonSecondary
@@ -521,7 +521,7 @@
                   <AppSection v-if="testsEnabled" label="postRequestTests">
                     <ul>
                       <li>
-                        <div class="row-wrapper">
+                        <div class="flex flex-1">
                           <label>{{ $t("javascript_code") }}</label>
                           <div>
                             <ButtonSecondary
@@ -547,7 +547,7 @@
                           completeMode="test"
                         />
                         <div v-if="testReports.length !== 0">
-                          <div class="row-wrapper">
+                          <div class="flex flex-1">
                             <label>Test Reports</label>
                             <div>
                               <ButtonSecondary
@@ -570,7 +570,7 @@
                             </div>
                             <p
                               v-else-if="testReport.result"
-                              class="row-wrapper info"
+                              class="flex flex-1 info"
                             >
                               <span :class="testReport.styles.class">
                                 <i class="material-icons">
@@ -595,7 +595,7 @@
               </SmartTabs>
             </section>
           </Pane>
-          <Pane class="bg-purple-100">
+          <Pane class="overflow-auto">
             <HttpResponse
               :response="response"
               :active="runningRequest"
@@ -604,27 +604,25 @@
           </Pane>
         </Splitpanes>
       </Pane>
-      <Pane max-size="40" class="bg-pink-100">
-        <aside class="lg:max-w-md">
-          <section>
-            <SmartTabs>
-              <SmartTab :id="'history'" :label="$t('history')" :selected="true">
-                <History
-                  :page="'rest'"
-                  @useHistory="handleUseHistory"
-                  ref="historyComponent"
-                />
-              </SmartTab>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
+        <aside class="h-full bg-yellow-200">
+          <SmartTabs>
+            <SmartTab :id="'history'" :label="$t('history')" :selected="true">
+              <History
+                :page="'rest'"
+                @useHistory="handleUseHistory"
+                ref="historyComponent"
+              />
+            </SmartTab>
 
-              <SmartTab :id="'collections'" :label="$t('collections')">
-                <Collections />
-              </SmartTab>
+            <SmartTab :id="'collections'" :label="$t('collections')">
+              <Collections />
+            </SmartTab>
 
-              <SmartTab :id="'env'" :label="$t('environments')">
-                <Environments />
-              </SmartTab>
-            </SmartTabs>
-          </section>
+            <SmartTab :id="'env'" :label="$t('environments')">
+              <Environments />
+            </SmartTab>
+          </SmartTabs>
         </aside>
       </Pane>
     </Splitpanes>
@@ -673,7 +671,7 @@
         </div>
       </template>
       <template #body>
-        <div class="row-wrapper">
+        <div class="flex flex-1">
           <label for="token-req-list">{{ $t("token_req_list") }}</label>
           <div>
             <ButtonSecondary
diff --git a/pages/doc.vue b/pages/doc.vue
index 65d39870e..0111ee163 100644
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,116 +1,123 @@
 <template>
-  <div class="page">
-    <div class="content">
-      <div class="">
-        <AppSection label="import">
-          <div class="flex flex-col">
-            <label>{{ $t("collection") }}</label>
-            <p>
-              {{ $t("generate_docs_message") }}
-            </p>
-            <div class="row-wrapper">
-              <label for="collectionUpload">
-                <ButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  title="JSON"
-                  icon="folder"
-                  :label="$t('import_collections')"
-                  @click.native="$refs.collectionUpload.click()"
+  <div>
+    <Splitpanes vertical :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <Splitpanes horizontal :dbl-click-splitter="false">
+          <Pane class="overflow-auto">
+            <AppSection label="import">
+              <div class="flex flex-col">
+                <label>{{ $t("collection") }}</label>
+                <p>
+                  {{ $t("generate_docs_message") }}
+                </p>
+                <div class="flex flex-1">
+                  <label for="collectionUpload">
+                    <ButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      title="JSON"
+                      icon="folder"
+                      :label="$t('import_collections')"
+                      @click.native="$refs.collectionUpload.click()"
+                    />
+                  </label>
+                  <input
+                    ref="collectionUpload"
+                    class="input"
+                    name="collectionUpload"
+                    type="file"
+                    @change="uploadCollection"
+                  />
+                  <div>
+                    <ButtonSecondary
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('clear')"
+                      icon="clear_all"
+                      @click.native="collectionJSON = '[]'"
+                    />
+                  </div>
+                </div>
+                <SmartAceEditor
+                  v-model="collectionJSON"
+                  :lang="'json'"
+                  :lint="false"
+                  :options="{
+                    maxLines: '16',
+                    minLines: '8',
+                    fontSize: '15px',
+                    autoScrollEditorIntoView: true,
+                    showPrintMargin: false,
+                    useWorker: false,
+                  }"
                 />
-              </label>
-              <input
-                ref="collectionUpload"
-                class="input"
-                name="collectionUpload"
-                type="file"
-                @change="uploadCollection"
-              />
-              <div>
                 <ButtonSecondary
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('clear')"
-                  icon="clear_all"
-                  @click.native="collectionJSON = '[]'"
+                  icon="topic"
+                  :label="$t('generate_docs')"
+                  @click.native="getDoc"
                 />
               </div>
-            </div>
-            <SmartAceEditor
-              v-model="collectionJSON"
-              :lang="'json'"
-              :lint="false"
-              :options="{
-                maxLines: '16',
-                minLines: '8',
-                fontSize: '15px',
-                autoScrollEditorIntoView: true,
-                showPrintMargin: false,
-                useWorker: false,
-              }"
-            />
-            <ButtonSecondary
-              icon="topic"
-              :label="$t('generate_docs')"
-              @click.native="getDoc"
-            />
-          </div>
-        </AppSection>
-
-        <AppSection label="documentation">
-          <div class="flex flex-col">
-            <label>{{ $t("documentation") }}</label>
-            <p v-if="items.length === 0">
-              {{ $t("generate_docs_first") }}
-            </p>
-            <div v-else class="row-wrapper">
-              <div
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  !currentUser
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : currentUser.provider !== 'github.com'
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null
-                "
-              >
-                <ButtonSecondary
-                  :disabled="
-                    !currentUser
-                      ? true
-                      : currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  icon="assignment"
-                  label="$t('create_secret_gist')"
-                  @click.native="createDocsGist"
-                />
+            </AppSection>
+          </Pane>
+          <Pane class="overflow-auto">
+            <AppSection label="documentation">
+              <div class="flex flex-col">
+                <label>{{ $t("documentation") }}</label>
+                <p v-if="items.length === 0">
+                  {{ $t("generate_docs_first") }}
+                </p>
+                <div v-else class="flex flex-1">
+                  <div
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="
+                      !currentUser
+                        ? $t('login_with_github_to') + $t('create_secret_gist')
+                        : currentUser.provider !== 'github.com'
+                        ? $t('login_with_github_to') + $t('create_secret_gist')
+                        : null
+                    "
+                  >
+                    <ButtonSecondary
+                      :disabled="
+                        !currentUser
+                          ? true
+                          : currentUser.provider !== 'github.com'
+                          ? true
+                          : false
+                      "
+                      icon="assignment"
+                      label="$t('create_secret_gist')"
+                      @click.native="createDocsGist"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <span
+                    v-for="(collection, index) in items"
+                    :key="`collection-${index}`"
+                  >
+                    <DocsCollection :collection="collection" />
+                  </span>
+                </div>
               </div>
-            </div>
-            <div>
-              <span
-                v-for="(collection, index) in items"
-                :key="`collection-${index}`"
-              >
-                <DocsCollection :collection="collection" />
-              </span>
-            </div>
-          </div>
-        </AppSection>
-      </div>
-
-      <aside class="lg:max-w-md">
-        <Collections
-          :selected="selected"
-          :doc="true"
-          @use-collection="useSelectedCollection($event)"
-          @remove-collection="removeSelectedCollection($event)"
-        />
-      </aside>
-    </div>
+            </AppSection>
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
+        <aside class="lg:max-w-md">
+          <Collections
+            :selected="selected"
+            :doc="true"
+            @use-collection="useSelectedCollection($event)"
+            @remove-collection="removeSelectedCollection($event)"
+          />
+        </aside>
+      </Pane>
+    </Splitpanes>
   </div>
 </template>
 
 <script>
+import { Splitpanes, Pane } from "splitpanes"
 import Mustache from "mustache"
 import { currentUser$ } from "~/helpers/fb/auth"
 import DocsTemplate from "~/assets/md/docs.md"
@@ -118,6 +125,7 @@ import folderContents from "~/assets/md/folderContents.md"
 import folderBody from "~/assets/md/folderBody.md"
 
 export default {
+  components: { Splitpanes, Pane },
   data() {
     return {
       collectionJSON: "[]",
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 449c122b5..6670241d8 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,443 +1,448 @@
 <template>
-  <div class="page">
-    <div class="content">
-      <div class="">
-        <AppSection label="endpoint">
-          <ul>
-            <li>
-              <label for="url">{{ $t("url") }}</label>
-              <input
-                id="url"
-                v-model="url"
-                type="url"
-                spellcheck="false"
-                class="input md:rounded-bl-lg"
-                :placeholder="$t('url')"
-                @keyup.enter="onPollSchemaClick()"
+  <div>
+    <Splitpanes vertical :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
+        <Splitpanes horizontal :dbl-click-splitter="false">
+          <Pane class="overflow-auto">
+            <AppSection label="endpoint">
+              <ul>
+                <li>
+                  <label for="url">{{ $t("url") }}</label>
+                  <input
+                    id="url"
+                    v-model="url"
+                    type="url"
+                    spellcheck="false"
+                    class="input md:rounded-bl-lg"
+                    :placeholder="$t('url')"
+                    @keyup.enter="onPollSchemaClick()"
+                  />
+                </li>
+                <div>
+                  <li>
+                    <ButtonSecondary
+                      id="get"
+                      name="get"
+                      :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
+                      :label="
+                        !isPollingSchema ? $t('connect') : $t('disconnect')
+                      "
+                      @click.native="onPollSchemaClick"
+                    />
+                  </li>
+                </div>
+              </ul>
+            </AppSection>
+            <AppSection label="headers">
+              <div class="flex flex-col">
+                <label>{{ $t("headers") }}</label>
+                <ul v-if="headers.length !== 0">
+                  <li>
+                    <div class="flex flex-1">
+                      <label for="headerList">{{ $t("header_list") }}</label>
+                      <div>
+                        <ButtonSecondary
+                          v-tippy="{ theme: 'tooltip' }"
+                          :title="$t('clear')"
+                          icon="clear_all"
+                          @click.native="headers = []"
+                        />
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+                <ul
+                  v-for="(header, index) in headers"
+                  :key="`${header.value}_${index}`"
+                  class="
+                    divide-y divide-dashed divide-divider
+                    border-b border-dashed border-divider
+                    md:divide-x md:divide-y-0
+                  "
+                  :class="{ 'border-t': index == 0 }"
+                >
+                  <li>
+                    <SmartAutoComplete
+                      :placeholder="$t('header_count', { count: index + 1 })"
+                      :source="commonHeaders"
+                      :spellcheck="false"
+                      :value="header.key"
+                      autofocus
+                      @input="
+                        $store.commit('setGQLHeaderKey', {
+                          index,
+                          value: $event,
+                        })
+                      "
+                    />
+                  </li>
+                  <li>
+                    <input
+                      class="input"
+                      :placeholder="$t('value_count', { count: index + 1 })"
+                      :name="`value ${index}`"
+                      :value="header.value"
+                      autofocus
+                      @change="
+                        $store.commit('setGQLHeaderValue', {
+                          index,
+                          value: $event.target.value,
+                        })
+                      "
+                    />
+                  </li>
+                  <div>
+                    <li>
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="
+                          header.hasOwnProperty('active')
+                            ? header.active
+                              ? $t('turn_off')
+                              : $t('turn_on')
+                            : $t('turn_off')
+                        "
+                        @click.native="
+                          $store.commit('setActiveGQLHeader', {
+                            index,
+                            value: header.hasOwnProperty('active')
+                              ? !header.active
+                              : false,
+                          })
+                        "
+                      />
+                      <i class="material-icons">
+                        {{
+                          header.hasOwnProperty("active")
+                            ? header.active
+                              ? "check_box"
+                              : "check_box_outline_blank"
+                            : "check_box"
+                        }}
+                      </i>
+                    </li>
+                  </div>
+                  <div>
+                    <li>
+                      <ButtonSecondary
+                        v-tippy="{ theme: 'tooltip' }"
+                        :title="$t('delete')"
+                        icon="delete"
+                        @click.native="removeRequestHeader(index)"
+                      />
+                    </li>
+                  </div>
+                </ul>
+                <ul>
+                  <li>
+                    <ButtonSecondary
+                      icon="add"
+                      :label="$t('add_new')"
+                      @click.native="addRequestHeader"
+                    />
+                  </li>
+                </ul>
+              </div>
+            </AppSection>
+            <AppSection label="query">
+              <div class="flex flex-1 gqlRunQuery">
+                <label for="gqlQuery">{{ $t("query") }}</label>
+                <div>
+                  <ButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    title="
+                  `${$t('run_query')} (${getSpecialKey()}-Enter)`
+                "
+                    class="button"
+                    icon="play_arrow"
+                    @click.native="runQuery()"
+                  />
+                  <ButtonSecondary
+                    ref="copyQueryButton"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('copy_query')"
+                    :icon="copyQueryIcon"
+                    @click.native="copyQuery"
+                  />
+                  <ButtonSecondary
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
+                    :icon="prettifyIcon"
+                    @click.native="doPrettifyQuery"
+                  />
+                  <ButtonSecondary
+                    ref="saveRequest"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('save_to_collections')"
+                    icon="create_new_folder"
+                    @click.native="saveRequest"
+                  />
+                </div>
+              </div>
+              <GraphqlQueryEditor
+                ref="queryEditor"
+                v-model="gqlQueryString"
+                styles="rounded-b-lg"
+                :on-run-g-q-l-query="runQuery"
+                :options="{
+                  maxLines: responseBodyMaxLines,
+                  minLines: 10,
+                  fontSize: '15px',
+                  autoScrollEditorIntoView: true,
+                  showPrintMargin: false,
+                  useWorker: false,
+                }"
+                @update-query="updateQuery"
               />
-            </li>
-            <div>
-              <li>
-                <ButtonSecondary
-                  id="get"
-                  name="get"
-                  :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
-                  :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
-                  @click.native="onPollSchemaClick"
+            </AppSection>
+            <AppSection label="variables">
+              <div class="flex flex-col">
+                <label>{{ $t("variables") }}</label>
+                <SmartAceEditor
+                  v-model="variableString"
+                  :lang="'json'"
+                  :options="{
+                    maxLines: 10,
+                    minLines: 5,
+                    fontSize: '15px',
+                    autoScrollEditorIntoView: true,
+                    showPrintMargin: false,
+                    useWorker: false,
+                  }"
+                  styles="rounded-b-lg"
                 />
-              </li>
-            </div>
-          </ul>
-        </AppSection>
-
-        <AppSection label="headers">
-          <div class="flex flex-col">
-            <label>{{ $t("headers") }}</label>
-            <ul v-if="headers.length !== 0">
-              <li>
-                <div class="row-wrapper">
-                  <label for="headerList">{{ $t("header_list") }}</label>
+              </div>
+            </AppSection>
+          </Pane>
+          <Pane class="overflow-auto">
+            <AppSection ref="schema" label="schema">
+              <div class="flex flex-1">
+                <label>{{ $t("schema") }}</label>
+                <div v-if="schema">
+                  <ButtonSecondary
+                    ref="ToggleExpandResponse"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="
+                      !expandResponse
+                        ? $t('expand_response')
+                        : $t('collapse_response')
+                    "
+                    :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
+                    @click.native="ToggleExpandResponse"
+                  />
+                  <ButtonSecondary
+                    ref="downloadSchema"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('download_file')"
+                    :icon="downloadSchemaIcon"
+                    @click.native="downloadSchema"
+                  />
+                  <ButtonSecondary
+                    ref="copySchemaCode"
+                    v-tippy="{ theme: 'tooltip' }"
+                    :title="$t('copy_schema')"
+                    :icon="copySchemaIcon"
+                    @click.native="copySchema"
+                  />
+                </div>
+              </div>
+              <SmartAceEditor
+                v-if="schema"
+                :value="schema"
+                :lang="'graphqlschema'"
+                :options="{
+                  maxLines: responseBodyMaxLines,
+                  minLines: 16,
+                  fontSize: '15px',
+                  autoScrollEditorIntoView: true,
+                  readOnly: true,
+                  showPrintMargin: false,
+                  useWorker: false,
+                }"
+                styles="rounded-b-lg"
+              />
+              <input
+                v-else
+                ref="status"
+                class="input rounded-b-lg missing-data-response"
+                :value="$t('waiting_receive_schema')"
+                name="status"
+                readonly
+                type="text"
+              />
+            </AppSection>
+            <AppSection ref="response" label="response">
+              <div class="flex flex-col">
+                <label>{{ $t("response") }}</label>
+                <div class="flex flex-1">
+                  <label for="responseField">{{ $t("response_body") }}</label>
                   <div>
                     <ButtonSecondary
+                      v-if="response"
+                      ref="downloadResponse"
                       v-tippy="{ theme: 'tooltip' }"
-                      :title="$t('clear')"
-                      icon="clear_all"
-                      @click.native="headers = []"
+                      :title="$t('download_file')"
+                      :icon="downloadResponseIcon"
+                      @click.native="downloadResponse"
+                    />
+                    <ButtonSecondary
+                      v-if="response"
+                      ref="copyResponseButton"
+                      v-tippy="{ theme: 'tooltip' }"
+                      :title="$t('copy_response')"
+                      :icon="copyResponseIcon"
+                      @click.native="copyResponse"
                     />
                   </div>
                 </div>
-              </li>
-            </ul>
-            <ul
-              v-for="(header, index) in headers"
-              :key="`${header.value}_${index}`"
-              class="
-                divide-y divide-dashed divide-divider
-                border-b border-dashed border-divider
-                md:divide-x md:divide-y-0
-              "
-              :class="{ 'border-t': index == 0 }"
-            >
-              <li>
-                <SmartAutoComplete
-                  :placeholder="$t('header_count', { count: index + 1 })"
-                  :source="commonHeaders"
-                  :spellcheck="false"
-                  :value="header.key"
-                  autofocus
-                  @input="
-                    $store.commit('setGQLHeaderKey', {
-                      index,
-                      value: $event,
-                    })
-                  "
-                />
-              </li>
-              <li>
-                <input
-                  class="input"
-                  :placeholder="$t('value_count', { count: index + 1 })"
-                  :name="`value ${index}`"
-                  :value="header.value"
-                  autofocus
-                  @change="
-                    $store.commit('setGQLHeaderValue', {
-                      index,
-                      value: $event.target.value,
-                    })
-                  "
-                />
-              </li>
-              <div>
-                <li>
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="
-                      header.hasOwnProperty('active')
-                        ? header.active
-                          ? $t('turn_off')
-                          : $t('turn_on')
-                        : $t('turn_off')
-                    "
-                    @click.native="
-                      $store.commit('setActiveGQLHeader', {
-                        index,
-                        value: header.hasOwnProperty('active')
-                          ? !header.active
-                          : false,
-                      })
-                    "
-                  />
-                  <i class="material-icons">
-                    {{
-                      header.hasOwnProperty("active")
-                        ? header.active
-                          ? "check_box"
-                          : "check_box_outline_blank"
-                        : "check_box"
-                    }}
-                  </i>
-                </li>
-              </div>
-              <div>
-                <li>
-                  <ButtonSecondary
-                    v-tippy="{ theme: 'tooltip' }"
-                    :title="$t('delete')"
-                    icon="delete"
-                    @click.native="removeRequestHeader(index)"
-                  />
-                </li>
-              </div>
-            </ul>
-            <ul>
-              <li>
-                <ButtonSecondary
-                  icon="add"
-                  :label="$t('add_new')"
-                  @click.native="addRequestHeader"
-                />
-              </li>
-            </ul>
-          </div>
-        </AppSection>
-
-        <AppSection ref="schema" label="schema">
-          <div class="row-wrapper">
-            <label>{{ $t("schema") }}</label>
-            <div v-if="schema">
-              <ButtonSecondary
-                ref="ToggleExpandResponse"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="
-                  !expandResponse
-                    ? $t('expand_response')
-                    : $t('collapse_response')
-                "
-                :icon="!expandResponse ? 'unfold_more' : 'unfold_less'"
-                @click.native="ToggleExpandResponse"
-              />
-              <ButtonSecondary
-                ref="downloadSchema"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('download_file')"
-                :icon="downloadSchemaIcon"
-                @click.native="downloadSchema"
-              />
-              <ButtonSecondary
-                ref="copySchemaCode"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('copy_schema')"
-                :icon="copySchemaIcon"
-                @click.native="copySchema"
-              />
-            </div>
-          </div>
-          <SmartAceEditor
-            v-if="schema"
-            :value="schema"
-            :lang="'graphqlschema'"
-            :options="{
-              maxLines: responseBodyMaxLines,
-              minLines: 16,
-              fontSize: '15px',
-              autoScrollEditorIntoView: true,
-              readOnly: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-            styles="rounded-b-lg"
-          />
-          <input
-            v-else
-            ref="status"
-            class="input rounded-b-lg missing-data-response"
-            :value="$t('waiting_receive_schema')"
-            name="status"
-            readonly
-            type="text"
-          />
-        </AppSection>
-
-        <AppSection label="query">
-          <div class="row-wrapper gqlRunQuery">
-            <label for="gqlQuery">{{ $t("query") }}</label>
-            <div>
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                title="
-                  `${$t('run_query')} (${getSpecialKey()}-Enter)`
-                "
-                class="button"
-                icon="play_arrow"
-                @click.native="runQuery()"
-              />
-              <ButtonSecondary
-                ref="copyQueryButton"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('copy_query')"
-                :icon="copyQueryIcon"
-                @click.native="copyQuery"
-              />
-              <ButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
-                :icon="prettifyIcon"
-                @click.native="doPrettifyQuery"
-              />
-              <ButtonSecondary
-                ref="saveRequest"
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('save_to_collections')"
-                icon="create_new_folder"
-                @click.native="saveRequest"
-              />
-            </div>
-          </div>
-          <GraphqlQueryEditor
-            ref="queryEditor"
-            v-model="gqlQueryString"
-            styles="rounded-b-lg"
-            :on-run-g-q-l-query="runQuery"
-            :options="{
-              maxLines: responseBodyMaxLines,
-              minLines: 10,
-              fontSize: '15px',
-              autoScrollEditorIntoView: true,
-              showPrintMargin: false,
-              useWorker: false,
-            }"
-            @update-query="updateQuery"
-          />
-        </AppSection>
-
-        <AppSection label="variables">
-          <div class="flex flex-col">
-            <label>{{ $t("variables") }}</label>
-            <SmartAceEditor
-              v-model="variableString"
-              :lang="'json'"
-              :options="{
-                maxLines: 10,
-                minLines: 5,
-                fontSize: '15px',
-                autoScrollEditorIntoView: true,
-                showPrintMargin: false,
-                useWorker: false,
-              }"
-              styles="rounded-b-lg"
-            />
-          </div>
-        </AppSection>
-
-        <AppSection ref="response" label="response">
-          <div class="flex flex-col">
-            <label>{{ $t("response") }}</label>
-            <div class="row-wrapper">
-              <label for="responseField">{{ $t("response_body") }}</label>
-              <div>
-                <ButtonSecondary
+                <SmartAceEditor
                   v-if="response"
-                  ref="downloadResponse"
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('download_file')"
-                  :icon="downloadResponseIcon"
-                  @click.native="downloadResponse"
+                  :value="response"
+                  :lang="'json'"
+                  :lint="false"
+                  :options="{
+                    maxLines: responseBodyMaxLines,
+                    minLines: 10,
+                    fontSize: '15px',
+                    autoScrollEditorIntoView: true,
+                    readOnly: true,
+                    showPrintMargin: false,
+                    useWorker: false,
+                  }"
+                  styles="rounded-b-lg"
                 />
-                <ButtonSecondary
-                  v-if="response"
-                  ref="copyResponseButton"
-                  v-tippy="{ theme: 'tooltip' }"
-                  :title="$t('copy_response')"
-                  :icon="copyResponseIcon"
-                  @click.native="copyResponse"
-                />
-              </div>
-            </div>
-            <SmartAceEditor
-              v-if="response"
-              :value="response"
-              :lang="'json'"
-              :lint="false"
-              :options="{
-                maxLines: responseBodyMaxLines,
-                minLines: 10,
-                fontSize: '15px',
-                autoScrollEditorIntoView: true,
-                readOnly: true,
-                showPrintMargin: false,
-                useWorker: false,
-              }"
-              styles="rounded-b-lg"
-            />
-            <input
-              v-else
-              ref="status"
-              class="input rounded-b-lg missing-data-response"
-              :value="$t('waiting_receive_response')"
-              name="status"
-              readonly
-              type="text"
-            />
-          </div>
-        </AppSection>
-      </div>
-
-      <aside class="lg:max-w-md">
-        <SmartTabs>
-          <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
-            <AppSection label="docs">
-              <section class="flex-col">
                 <input
-                  v-model="graphqlFieldsFilterText"
+                  v-else
+                  ref="status"
+                  class="input rounded-b-lg missing-data-response"
+                  :value="$t('waiting_receive_response')"
+                  name="status"
+                  readonly
                   type="text"
-                  :placeholder="$t('search')"
-                  class="input rounded-t-lg"
                 />
-                <SmartTabs ref="gqlTabs" styles="m-4">
-                  <div class="gqlTabs">
-                    <SmartTab
-                      v-if="queryFields.length > 0"
-                      :id="'queries'"
-                      :label="$t('queries')"
-                      :selected="true"
-                    >
-                      <div
-                        v-for="field in filteredQueryFields"
-                        :key="field.name"
-                      >
-                        <GraphqlField
-                          :gql-field="field"
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
-
-                    <SmartTab
-                      v-if="mutationFields.length > 0"
-                      :id="'mutations'"
-                      :label="$t('mutations')"
-                    >
-                      <div
-                        v-for="field in filteredMutationFields"
-                        :key="field.name"
-                      >
-                        <GraphqlField
-                          :gql-field="field"
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
-
-                    <SmartTab
-                      v-if="subscriptionFields.length > 0"
-                      :id="'subscriptions'"
-                      :label="$t('subscriptions')"
-                    >
-                      <div
-                        v-for="field in filteredSubscriptionFields"
-                        :key="field.name"
-                      >
-                        <GraphqlField
-                          :gql-field="field"
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
-
-                    <SmartTab
-                      v-if="graphqlTypes.length > 0"
-                      :id="'types'"
-                      ref="typesTab"
-                      :label="$t('types')"
-                    >
-                      <div
-                        v-for="type in filteredGraphqlTypes"
-                        :key="type.name"
-                      >
-                        <GraphqlType
-                          :gql-type="type"
-                          :gql-types="graphqlTypes"
-                          :is-highlighted="
-                            isGqlTypeHighlighted({ gqlType: type })
-                          "
-                          :highlighted-fields="
-                            getGqlTypeHighlightedFields({ gqlType: type })
-                          "
-                          :jump-type-callback="handleJumpToType"
-                        />
-                      </div>
-                    </SmartTab>
-                  </div>
-                </SmartTabs>
-              </section>
-              <p
-                v-if="
-                  queryFields.length === 0 &&
-                  mutationFields.length === 0 &&
-                  subscriptionFields.length === 0 &&
-                  graphqlTypes.length === 0
-                "
-              >
-                {{ $t("send_request_first") }}
-              </p>
+              </div>
             </AppSection>
-          </SmartTab>
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
+        <aside class="lg:max-w-md">
+          <SmartTabs>
+            <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
+              <AppSection label="docs">
+                <section class="flex-col">
+                  <input
+                    v-model="graphqlFieldsFilterText"
+                    type="text"
+                    :placeholder="$t('search')"
+                    class="input rounded-t-lg"
+                  />
+                  <SmartTabs ref="gqlTabs" styles="m-4">
+                    <div class="gqlTabs">
+                      <SmartTab
+                        v-if="queryFields.length > 0"
+                        :id="'queries'"
+                        :label="$t('queries')"
+                        :selected="true"
+                      >
+                        <div
+                          v-for="field in filteredQueryFields"
+                          :key="field.name"
+                        >
+                          <GraphqlField
+                            :gql-field="field"
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
 
-          <SmartTab :id="'history'" :label="$t('history')">
-            <History
-              ref="graphqlHistoryComponent"
-              :page="'graphql'"
-              @useHistory="handleUseHistory"
-            />
-          </SmartTab>
+                      <SmartTab
+                        v-if="mutationFields.length > 0"
+                        :id="'mutations'"
+                        :label="$t('mutations')"
+                      >
+                        <div
+                          v-for="field in filteredMutationFields"
+                          :key="field.name"
+                        >
+                          <GraphqlField
+                            :gql-field="field"
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
+
+                      <SmartTab
+                        v-if="subscriptionFields.length > 0"
+                        :id="'subscriptions'"
+                        :label="$t('subscriptions')"
+                      >
+                        <div
+                          v-for="field in filteredSubscriptionFields"
+                          :key="field.name"
+                        >
+                          <GraphqlField
+                            :gql-field="field"
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
+
+                      <SmartTab
+                        v-if="graphqlTypes.length > 0"
+                        :id="'types'"
+                        ref="typesTab"
+                        :label="$t('types')"
+                      >
+                        <div
+                          v-for="type in filteredGraphqlTypes"
+                          :key="type.name"
+                        >
+                          <GraphqlType
+                            :gql-type="type"
+                            :gql-types="graphqlTypes"
+                            :is-highlighted="
+                              isGqlTypeHighlighted({ gqlType: type })
+                            "
+                            :highlighted-fields="
+                              getGqlTypeHighlightedFields({ gqlType: type })
+                            "
+                            :jump-type-callback="handleJumpToType"
+                          />
+                        </div>
+                      </SmartTab>
+                    </div>
+                  </SmartTabs>
+                </section>
+                <p
+                  v-if="
+                    queryFields.length === 0 &&
+                    mutationFields.length === 0 &&
+                    subscriptionFields.length === 0 &&
+                    graphqlTypes.length === 0
+                  "
+                >
+                  {{ $t("send_request_first") }}
+                </p>
+              </AppSection>
+            </SmartTab>
+
+            <SmartTab :id="'history'" :label="$t('history')">
+              <History
+                ref="graphqlHistoryComponent"
+                :page="'graphql'"
+                @useHistory="handleUseHistory"
+              />
+            </SmartTab>
+
+            <SmartTab :id="'collections'" :label="$t('collections')">
+              <CollectionsGraphql />
+            </SmartTab>
+          </SmartTabs>
+        </aside>
+      </Pane>
+    </Splitpanes>
 
-          <SmartTab :id="'collections'" :label="$t('collections')">
-            <CollectionsGraphql />
-          </SmartTab>
-        </SmartTabs>
-      </aside>
-    </div>
     <CollectionsSaveRequest
       mode="graphql"
       :show="showSaveRequestModal"
@@ -448,6 +453,7 @@
 </template>
 
 <script>
+import { Splitpanes, Pane } from "splitpanes"
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
 import { getPlatformSpecialKey } from "~/helpers/platformutils"
@@ -456,10 +462,10 @@ import { getSettingSubject } from "~/newstore/settings"
 import { addGraphqlHistoryEntry } from "~/newstore/history"
 
 export default {
+  components: { Splitpanes, Pane },
   beforeRouteLeave(_to, _from, next) {
     this.isPollingSchema = false
     if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
-
     next()
   },
   data() {
@@ -1122,8 +1128,6 @@ export default {
 .gqlTabs {
   @apply relative;
   @apply overflow-auto;
-
-  max-height: calc(100vh - 192px);
 }
 
 .gqlRunQuery {
diff --git a/pages/realtime.vue b/pages/realtime.vue
index ea807c754..d1a22e555 100644
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -1,24 +1,19 @@
 <template>
-  <div class="page">
-    <section id="options">
-      <SmartTabs>
-        <SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
-          <RealtimeWebsocket />
-        </SmartTab>
-
-        <SmartTab :id="'sse'" :label="$t('sse')">
-          <RealtimeSse />
-        </SmartTab>
-
-        <SmartTab :id="'socketio'" :label="$t('socketio')">
-          <RealtimeSocketio />
-        </SmartTab>
-
-        <SmartTab :id="'mqtt'" :label="$t('mqtt')">
-          <RealtimeMqtt />
-        </SmartTab>
-      </SmartTabs>
-    </section>
+  <div>
+    <SmartTabs>
+      <SmartTab :id="'websocket'" :label="$t('websocket')" :selected="true">
+        <RealtimeWebsocket />
+      </SmartTab>
+      <SmartTab :id="'sse'" :label="$t('sse')">
+        <RealtimeSse />
+      </SmartTab>
+      <SmartTab :id="'socketio'" :label="$t('socketio')">
+        <RealtimeSocketio />
+      </SmartTab>
+      <SmartTab :id="'mqtt'" :label="$t('mqtt')">
+        <RealtimeMqtt />
+      </SmartTab>
+    </SmartTabs>
   </div>
 </template>
 
diff --git a/pages/settings.vue b/pages/settings.vue
index a97b56e47..849e56a65 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div>
     <div class="space-y-8">
       <div class="md:grid md:grid-cols-3 md:gap-4">
         <div class="md:col-span-1 p-8">