feat: init split layouts

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%;
+}

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>

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

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' &&

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

components/environments/Environment.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row-wrapper">
+    <div class="flex flex-1">
       <div>
         <ButtonSecondary
           icon="layers"

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"

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="history.length !== 0" class="rounded-b-lg bg-primaryLight">
-      <div v-if="!isClearingHistory" class="row-wrapper">
+      <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">
+      <div v-else class="flex items-center justify-between flex-1">
-        <p>
+        <span class="flex items-center">
-          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
+          <i class="material-icons mx-2">help_outline</i>
-        </p>
+          {{ $t("are_you_sure") }}
+        </span>
         <div>
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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,

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,

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>

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;

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>

components/teams/Team.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row-wrapper">
+  <div class="flex flex-1">
     <div>
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"

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"

layouts/default.vue

@@ -1,36 +1,28 @@
 <template>
   <div class="flex h-screen w-screen">
-    <Splitpanes horizontal class="hoppscotch-theme">
+    <Splitpanes horizontal :dbl-click-splitter="false">
-      <Pane class="flex-1">
+      <Pane class="flex flex-1 overflow-auto">
-        <Splitpanes vertical class="hoppscotch-theme">
+        <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">
+          <Pane class="flex flex-1 overflow-auto">
-            <Splitpanes
+            <Splitpanes horizontal :dbl-click-splitter="false">
-              horizontal
+              <Pane v-if="!zenMode" style="height: auto" class="overflow-auto">
-              :push-other-panes="false"
-              class="hoppscotch-theme"
-            >
-              <Pane v-if="!zenMode" style="height: auto">
                 <AppHeader />
               </Pane>
-              <Pane class="flex-1">
+              <Pane class="flex flex-1 overflow-auto">
-                <Splitpanes vertical class="hoppscotch-theme">
-                  <Pane class="overflow-y-auto">
                 <nuxt class="container" :hide-right-pane="hideRightPane" />
               </Pane>
             </Splitpanes>
           </Pane>
         </Splitpanes>
       </Pane>
-        </Splitpanes>
+      <Pane style="height: auto" class="overflow-auto">
-      </Pane>
-      <Pane style="height: auto" class="bg-primaryDark">
         <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>

pages/api.vue

@@ -1,10 +1,10 @@
 <template>
   <!-- eslint-disable -->
   <div>
-    <Splitpanes vertical class="hoppscotch-theme">
+    <Splitpanes vertical :dbl-click-splitter="false">
-      <Pane min-size="60" class="bg-violet-100">
+      <Pane class="overflow-auto">
-        <Splitpanes horizontal class="hoppscotch-theme">
+        <Splitpanes horizontal :dbl-click-splitter="false">
-          <Pane class="bg-indigo-100">
+          <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">
+      <Pane max-size="35" min-size="20" class="overflow-auto">
-        <aside class="lg:max-w-md">
+        <aside class="h-full bg-yellow-200">
-          <section>
           <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

pages/doc.vue

@@ -1,14 +1,16 @@
 <template>
-  <div class="page">
+  <div>
-    <div class="content">
+    <Splitpanes vertical :dbl-click-splitter="false">
-      <div class="">
+      <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: "[]",

pages/graphql.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="page">
+  <div>
-    <div class="content">
+    <Splitpanes vertical :dbl-click-splitter="false">
-      <div class="">
+      <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 {

pages/realtime.vue

@@ -1,24 +1,19 @@
 <template>
-  <div class="page">
+  <div>
-    <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>
 </template>
 

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