feat: init split layouts

2021-07-06 17:31:18 +00:00
parent 93d373c032
commit fc5a5aad8d
35 changed files with 1204 additions and 1061 deletions
--- 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%;
+}
--- 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>
--- 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')"
--- 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' &&
--- 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
--- 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"
--- 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"
--- 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' }"
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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' }"
--- 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>
--- 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
--- 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
--- 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
--- 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
--- 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
--- a/components/realtime/Mqtt.vue
+++ b/components/realtime/Mqtt.vue
@@ -1,5 +1,9 @@
 <template>
  <div>
+    <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>
@@ -18,9 +22,15 @@
                    <ButtonSecondary
                      id="connect"
                      :disabled="!validUrl"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                      class="
+                        button
+                        rounded-b-lg
+                        md:rounded-bl-none md:rounded-br-lg
+                      "
                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
-              :label="connectionState ? $t('disconnect') : $t('connect')"
+                      :label="
+                        connectionState ? $t('disconnect') : $t('connect')
+                      "
                      reverse
                      @click.native="toggleConnection"
                    />
@@ -28,13 +38,20 @@
                </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>
@@ -87,7 +104,11 @@
                  id="subscribe"
                  name="get"
                  :disabled="!cansubscribe"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                  class="
+                    button
+                    rounded-b-lg
+                    md:rounded-bl-none md:rounded-br-lg
+                  "
                  :icon="subscriptionState ? 'sync_disabled' : 'sync'"
                  :label="
                    subscriptionState
@@ -101,14 +122,18 @@
            </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",
--- a/components/realtime/Socketio.vue
+++ b/components/realtime/Socketio.vue
@@ -1,5 +1,9 @@
 <template>
  <div>
+    <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>
@@ -32,9 +36,15 @@
                      id="connect"
                      :disabled="!urlValid"
                      name="connect"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                      class="
+                        button
+                        rounded-b-lg
+                        md:rounded-bl-none md:rounded-br-lg
+                      "
                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
-              :label="!connectionState ? $t('connect') : $t('disconnect')"
+                      :label="
+                        !connectionState ? $t('connect') : $t('disconnect')
+                      "
                      reverse
                      @click.native="toggleConnection"
                    />
@@ -42,13 +52,20 @@
                </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>
@@ -64,7 +81,7 @@
          </ul>
          <ul>
            <li>
-          <div class="row-wrapper">
+              <div class="flex flex-1">
                <label>{{ $t("message") }}s</label>
              </div>
            </li>
@@ -126,15 +143,19 @@
            </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",
--- a/components/realtime/Sse.vue
+++ b/components/realtime/Sse.vue
@@ -1,5 +1,7 @@
 <template>
  <div>
+    <Splitpanes horizontal :dbl-click-splitter="false">
+      <Pane class="overflow-auto">
        <AppSection label="request">
          <ul>
            <li>
@@ -20,7 +22,11 @@
                  id="start"
                  :disabled="!serverValid"
                  name="start"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                  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
@@ -30,7 +36,8 @@
            </div>
          </ul>
        </AppSection>
-
+      </Pane>
+      <Pane class="overflow-auto">
        <AppSection label="response">
          <ul>
            <li>
@@ -39,13 +46,17 @@
            </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,
--- a/components/realtime/Websocket.vue
+++ b/components/realtime/Websocket.vue
@@ -1,5 +1,9 @@
 <template>
  <div>
+    <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>
@@ -23,7 +27,9 @@
                      class="button"
                      name="connect"
                      :icon="!connectionState ? 'sync' : 'sync_disabled'"
-              :label="!connectionState ? $t('connect') : $t('disconnect')"
+                      :label="
+                        !connectionState ? $t('connect') : $t('disconnect')
+                      "
                      reverse
                      @click.native="toggleConnection"
                    />
@@ -32,7 +38,7 @@
              </ul>
              <ul>
                <li>
-          <div class="row-wrapper">
+                  <div class="flex flex-1">
                    <label>{{ $t("protocols") }}</label>
                  </div>
                </li>
@@ -108,13 +114,20 @@
                </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>
@@ -136,7 +149,11 @@
                  id="send"
                  name="send"
                  :disabled="!connectionState"
-              class="button rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                  class="
+                    button
+                    rounded-b-lg
+                    md:rounded-bl-none md:rounded-br-lg
+                  "
                  icon="send"
                  :label="$t('send')"
                  @click.native="sendMessage"
@@ -145,13 +162,18 @@
            </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,
--- 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>
--- 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;
--- 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>
--- 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' }"
--- 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"
--- 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">
+              <Pane class="flex flex-1 overflow-auto">
                <nuxt class="container" :hide-right-pane="hideRightPane" />
              </Pane>
            </Splitpanes>
          </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,6 +48,7 @@
              @click.native="zenMode = !zenMode"
            />
          </div>
+          <div>
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="hideRightPane ? $t('show_sidebar') : $t('hide_sidebar')"
@@ -64,6 +57,7 @@
              @click.native="hideRightPane = !hideRightPane"
            />
          </div>
+        </div>
      </Pane>
    </Splitpanes>
  </div>
--- 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,9 +604,8 @@
          </Pane>
        </Splitpanes>
      </Pane>
-      <Pane max-size="40" class="bg-pink-100">
-        <aside class="lg:max-w-md">
-          <section>
+      <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
@@ -624,7 +623,6 @@
              <Environments />
            </SmartTab>
          </SmartTabs>
-          </section>
        </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
--- a/pages/doc.vue
+++ b/pages/doc.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="page">
-    <div class="content">
-      <div class="">
+  <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="row-wrapper">
+                <div class="flex flex-1">
                  <label for="collectionUpload">
                    <ButtonSecondary
                      v-tippy="{ theme: 'tooltip' }"
@@ -54,14 +56,15 @@
                />
              </div>
            </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="row-wrapper">
+                <div v-else class="flex flex-1">
                  <div
                    v-tippy="{ theme: 'tooltip' }"
                    :title="
@@ -96,8 +99,10 @@
                </div>
              </div>
            </AppSection>
-      </div>
-
+          </Pane>
+        </Splitpanes>
+      </Pane>
+      <Pane max-size="35" min-size="20" class="overflow-auto">
        <aside class="lg:max-w-md">
          <Collections
            :selected="selected"
@@ -106,11 +111,13 @@
            @remove-collection="removeSelectedCollection($event)"
          />
        </aside>
-    </div>
+      </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: "[]",
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -1,7 +1,9 @@
 <template>
-  <div class="page">
-    <div class="content">
-      <div class="">
+  <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>
@@ -22,20 +24,21 @@
                      id="get"
                      name="get"
                      :icon="!isPollingSchema ? 'sync' : 'sync_disabled'"
-                  :label="!isPollingSchema ? $t('connect') : $t('disconnect')"
+                      :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="row-wrapper">
+                    <div class="flex flex-1">
                      <label for="headerList">{{ $t("header_list") }}</label>
                      <div>
                        <ButtonSecondary
@@ -141,9 +144,79 @@
                </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"
+              />
+            </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>
+          </Pane>
+          <Pane class="overflow-auto">
            <AppSection ref="schema" label="schema">
-          <div class="row-wrapper">
+              <div class="flex flex-1">
                <label>{{ $t("schema") }}</label>
                <div v-if="schema">
                  <ButtonSecondary
@@ -198,82 +271,10 @@
                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">
+                <div class="flex flex-1">
                  <label for="responseField">{{ $t("response_body") }}</label>
                  <div>
                    <ButtonSecondary
@@ -321,8 +322,10 @@
                />
              </div>
            </AppSection>
-      </div>
-
+          </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">
@@ -437,7 +440,9 @@
            </SmartTab>
          </SmartTabs>
        </aside>
-    </div>
+      </Pane>
+    </Splitpanes>
+
    <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 {
--- a/pages/realtime.vue
+++ b/pages/realtime.vue
@@ -1,24 +1,19 @@
 <template>
-  <div class="page">
-    <section id="options">
+  <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>
-    </section>
  </div>
 </template>

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