refactor: minor ui improvements

2021-12-15 23:06:35 +05:30
parent 78ed95bcaa
commit daffc3fe0e
31 changed files with 908 additions and 957 deletions
--- a/packages/hoppscotch-app/components/app/Fuse.vue
+++ b/packages/hoppscotch-app/components/app/Fuse.vue
@@ -14,7 +14,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center my-2">
+      <span class="my-2 text-center">
        {{ t("state.nothing_found") }} "{{ search }}"
      </span>
    </div>
--- a/packages/hoppscotch-app/components/app/PowerSearch.vue
+++ b/packages/hoppscotch-app/components/app/PowerSearch.vue
@@ -17,22 +17,22 @@
        class="bg-transparent flex flex-shrink-0 text-base text-secondaryDark p-6"
      />
      <div
-        class="flex pb-4 px-4 border-b text-tiny border-dividerLight justify-between text-secondaryLight whitespace-nowrap overflow-auto flex-shrink-0 hide-scrollbar"
+        class="border-b border-dividerLight flex flex-shrink-0 text-tiny text-secondaryLight px-4 pb-4 justify-between whitespace-nowrap overflow-auto hide-scrollbar"
      >
        <div class="flex items-center">
          <kbd class="shortcut-key">↑</kbd>
          <kbd class="shortcut-key">↓</kbd>
-          <span class="truncate ml-2">
+          <span class="ml-2 truncate">
            {{ t("action.to_navigate") }}
          </span>
          <kbd class="shortcut-key">↩</kbd>
-          <span class="truncate ml-2">
+          <span class="ml-2 truncate">
            {{ t("action.to_select") }}
          </span>
        </div>
        <div class="flex items-center">
          <kbd class="shortcut-key">ESC</kbd>
-          <span class="truncate ml-2">
+          <span class="ml-2 truncate">
            {{ t("action.to_close") }}
          </span>
        </div>
--- a/packages/hoppscotch-app/components/app/Section.vue
+++ b/packages/hoppscotch-app/components/app/Section.vue
@@ -1,14 +0,0 @@
-<template>
-  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
-    <slot></slot>
-  </section>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  label: {
-    type: String,
-    default: "Section",
-  },
-})
-</script>
--- a/packages/hoppscotch-app/components/app/Shortcuts.vue
+++ b/packages/hoppscotch-app/components/app/Shortcuts.vue
@@ -1,29 +1,24 @@
 <template>
  <AppSlideOver :show="show" @close="close()">
    <template #content>
+      <div class="bg-primary flex flex-col top-0 z-10 sticky">
        <div
-        class="bg-primary border-b border-dividerLight flex p-2 top-0 z-10 sticky items-center justify-between"
+          class="border-b border-dividerLight flex p-2 items-center justify-between"
        >
          <h3 class="ml-4 heading">{{ t("app.shortcuts") }}</h3>
-        <div class="flex">
          <ButtonSecondary svg="x" @click.native="close()" />
        </div>
-      </div>
-      <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col my-4 mx-6">
+        <div class="border-b border-dividerLight flex flex-col py-4 px-6">
          <input
            v-model="filterText"
            type="search"
            autocomplete="off"
-            class="bg-primaryLight border border-dividerLight rounded flex w-full py-2 px-4 focus-visible:border-divider"
+            class="bg-primaryLight border border-dividerLight rounded flex py-2 px-4 focus-visible:border-divider"
            :placeholder="`${t('action.search')}`"
          />
        </div>
      </div>
-      <div
-        v-if="filterText"
-        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
-      >
+      <div v-if="filterText" class="divide-dividerLight divide-y flex flex-col">
        <div
          v-for="(map, mapIndex) in searchResults"
          :key="`map-${mapIndex}`"
@@ -43,15 +38,12 @@
          class="flex flex-col text-secondaryLight p-4 items-center justify-center"
        >
          <i class="opacity-75 pb-2 material-icons">manage_search</i>
-          <span class="text-center my-2">
+          <span class="my-2 text-center">
            {{ t("state.nothing_found") }} "{{ filterText }}"
          </span>
        </div>
      </div>
-      <div
-        v-else
-        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
-      >
+      <div v-else class="divide-dividerLight divide-y flex flex-col">
        <div
          v-for="(map, mapIndex) in mappings"
          :key="`map-${mapIndex}`"
--- a/packages/hoppscotch-app/components/app/SlideOver.vue
+++ b/packages/hoppscotch-app/components/app/SlideOver.vue
@@ -10,7 +10,7 @@
      </div>
    </transition>
    <aside
-      class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto"
+      class="bg-primary flex flex-col h-full max-w-full transform transition top-0 ease-in-out right-0 w-96 z-30 duration-300 fixed overflow-auto hide-scrollbar"
      :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
    >
      <slot name="content"></slot>
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -140,7 +140,7 @@
            :src="`/images/states/${$colorMode.value}/pack.svg`"
            loading="lazy"
            class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.collection')"
+            :alt="`${$t('empty.collection')}`"
          />
          <span class="text-center">
            {{ $t("empty.collection") }}
--- a/packages/hoppscotch-app/components/collections/graphql/index.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <AppSection
-    label="collections"
-    :class="{ 'rounded border border-divider': savingMode }"
-  >
+  <div :class="{ 'rounded border border-divider': savingMode }">
    <div
      class="divide-dividerLight divide-y border-b border-dividerLight flex flex-col top-0 z-10 sticky"
      :class="{ 'bg-primary': !savingMode }"
@@ -13,7 +10,7 @@
        type="search"
        autocomplete="off"
        :placeholder="$t('action.search')"
-        class="bg-transparent flex w-full py-2 px-4"
+        class="bg-transparent flex py-2 px-4"
      />
      <div class="flex flex-1 justify-between">
        <ButtonSecondary
@@ -84,7 +81,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center my-2">
+      <span class="my-2 text-center">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
@@ -126,7 +123,7 @@
      :show="showModalImportExport"
      @hide-modal="displayModalImportExport(false)"
    />
-  </AppSection>
+  </div>
 </template>

 <script>
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -1,19 +1,16 @@
 <template>
-  <AppSection
-    label="collections"
-    :class="{ 'rounded border border-divider': saveRequest }"
-  >
+  <div :class="{ 'rounded border border-divider': saveRequest }">
    <div
      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
      :style="saveRequest ? 'top: calc(-1 * var(--font-size-body))' : 'top: 0'"
    >
-      <div v-if="!saveRequest" class="search-wrappe">
+      <div v-if="!saveRequest" class="flex flex-col">
        <input
          v-model="filterText"
          type="search"
          autocomplete="off"
          :placeholder="$t('action.search')"
-          class="bg-transparent flex w-full py-2 pr-2 pl-4"
+          class="bg-transparent py-2 pr-2 pl-4"
        />
      </div>
      <CollectionsChooseType
@@ -135,7 +132,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center my-2">
+      <span class="my-2 text-center">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
@@ -181,7 +178,7 @@
      @hide-modal="displayModalImportExport(false)"
      @update-team-collections="updateTeamCollections"
    />
-  </AppSection>
+  </div>
 </template>

 <script>
--- a/packages/hoppscotch-app/components/environments/Edit.vue
+++ b/packages/hoppscotch-app/components/environments/Edit.vue
@@ -78,7 +78,7 @@
              :src="`/images/states/${$colorMode.value}/blockchain.svg`"
              loading="lazy"
              class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-              :alt="$t('empty.environments')"
+              :alt="`${$t('empty.environments')}`"
            />
            <span class="text-center pb-4">
              {{ $t("empty.environments") }}
--- a/packages/hoppscotch-app/components/environments/index.vue
+++ b/packages/hoppscotch-app/components/environments/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="`${$t('environment.title')}`">
+  <div>
    <div class="bg-primary rounded-t flex flex-col top-0 z-10 sticky">
      <tippy ref="options" interactive trigger="click" theme="popover" arrow>
        <template #trigger>
@@ -69,19 +69,6 @@
        </div>
      </div>
    </div>
-    <EnvironmentsAdd
-      :show="showModalAdd"
-      @hide-modal="displayModalAdd(false)"
-    />
-    <EnvironmentsEdit
-      :show="showModalEdit"
-      :editing-environment-index="editingEnvironmentIndex"
-      @hide-modal="displayModalEdit(false)"
-    />
-    <EnvironmentsImportExport
-      :show="showModalImportExport"
-      @hide-modal="displayModalImportExport(false)"
-    />
    <div class="flex flex-col">
      <EnvironmentsEnvironment
        environment-index="Global"
@@ -117,7 +104,20 @@
        @click.native="displayModalAdd(true)"
      />
    </div>
-  </AppSection>
+    <EnvironmentsAdd
+      :show="showModalAdd"
+      @hide-modal="displayModalAdd(false)"
+    />
+    <EnvironmentsEdit
+      :show="showModalEdit"
+      :editing-environment-index="editingEnvironmentIndex"
+      @hide-modal="displayModalEdit(false)"
+    />
+    <EnvironmentsImportExport
+      :show="showModalImportExport"
+      @hide-modal="displayModalImportExport(false)"
+    />
+  </div>
 </template>

 <script lang="ts">
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -7,7 +7,6 @@
        :selected="true"
        :indicator="gqlQueryString.length > 0"
      >
-        <AppSection label="query">
        <div
          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between gqlRunQuery"
        >
@@ -56,7 +55,6 @@
          </div>
        </div>
        <div ref="queryEditor"></div>
-        </AppSection>
      </SmartTab>

      <SmartTab
@@ -64,7 +62,6 @@
        :label="`${t('tab.variables')}`"
        :indicator="variableString.length > 0"
      >
-        <AppSection label="variables">
        <div
          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
        >
@@ -85,6 +82,13 @@
              svg="trash-2"
              @click.native="clearGQLVariables()"
            />
+            <ButtonSecondary
+              ref="prettifyRequest"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('action.prettify')"
+              :svg="prettifyVariablesIcon"
+              @click.native="prettifyVariableString"
+            />
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.copy')"
@@ -94,7 +98,6 @@
          </div>
        </div>
        <div ref="variableEditor"></div>
-        </AppSection>
      </SmartTab>

      <SmartTab
@@ -102,7 +105,6 @@
        :label="`${t('tab.headers')}`"
        :info="activeGQLHeadersCount === 0 ? null : `${activeGQLHeadersCount}`"
      >
-        <AppSection label="headers">
        <div
          class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
        >
@@ -242,10 +244,8 @@
            />
          </div>
        </div>
-        </AppSection>
      </SmartTab>
    </SmartTabs>
-
    <CollectionsSaveRequest
      mode="graphql"
      :show="showSaveRequestModal"
@@ -379,8 +379,9 @@ useCodemirror(queryEditor, gqlQueryString, {
 })

 const copyQueryIcon = ref("copy")
-const prettifyQueryIcon = ref("wand")
 const copyVariablesIcon = ref("copy")
+const prettifyQueryIcon = ref("wand")
+const prettifyVariablesIcon = ref("wand")

 const showSaveRequestModal = ref(false)

@@ -511,6 +512,19 @@ const copyVariables = () => {
  setTimeout(() => (copyVariablesIcon.value = "copy"), 1000)
 }

+const prettifyVariableString = () => {
+  try {
+    const jsonObj = JSON.parse(variableString.value)
+    variableString.value = JSON.stringify(jsonObj, null, 2)
+    prettifyVariablesIcon.value = "check"
+  } catch (e) {
+    console.error(e)
+    prettifyVariablesIcon.value = "info"
+    toast.error(`${t("error.json_prettify_invalid_body")}`)
+  }
+  setTimeout(() => (prettifyVariablesIcon.value = "wand"), 1000)
+}
+
 const addRequestHeader = () => {
  const empty = { key: "", value: "", active: true }
  const index = headers.value.length
--- a/packages/hoppscotch-app/components/graphql/Response.vue
+++ b/packages/hoppscotch-app/components/graphql/Response.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="response" label="response">
+  <div>
    <div
      v-if="responseString === 'loading'"
      class="flex flex-col p-4 items-center justify-center"
@@ -71,7 +71,7 @@
        reverse
      />
    </div>
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/components/graphql/Sidebar.vue
+++ b/packages/hoppscotch-app/components/graphql/Sidebar.vue
@@ -26,7 +26,6 @@
      icon="book-open"
      :label="`${t('tab.documentation')}`"
    >
-      <AppSection label="docs">
      <div
        v-if="
          queryFields.length === 0 &&
@@ -133,11 +132,9 @@
          </div>
        </SmartTabs>
      </div>
-      </AppSection>
    </SmartTab>

    <SmartTab :id="'schema'" icon="box" :label="`${t('tab.schema')}`">
-      <AppSection ref="schema" label="schema">
      <div
        v-if="schemaString"
        class="bg-primary border-b border-dividerLight flex flex-1 pl-4 top-0 z-10 sticky items-center justify-between"
@@ -191,7 +188,6 @@
          {{ t("empty.schema") }}
        </span>
      </div>
-      </AppSection>
    </SmartTab>
  </SmartTabs>
 </template>
--- a/packages/hoppscotch-app/components/history/index.vue
+++ b/packages/hoppscotch-app/components/history/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="history">
+  <div>
    <div class="bg-primary border-b border-dividerLight flex top-0 z-10 sticky">
      <input
        v-model="filterText"
@@ -52,7 +52,7 @@
      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
    >
      <i class="opacity-75 pb-2 material-icons">manage_search</i>
-      <span class="text-center my-2">
+      <span class="my-2 text-center">
        {{ $t("state.nothing_found") }} "{{ filterText }}"
      </span>
    </div>
@@ -64,7 +64,7 @@
        :src="`/images/states/${$colorMode.value}/history.svg`"
        loading="lazy"
        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-        :alt="$t('empty.history')"
+        :alt="`${$t('empty.history')}`"
      />
      <span class="text-center mb-4">
        {{ $t("empty.history") }}
@@ -76,7 +76,7 @@
      @hide-modal="confirmRemove = false"
      @resolve="clearHistory"
    />
-  </AppSection>
+  </div>
 </template>

 <script lang="ts">
--- a/packages/hoppscotch-app/components/http/Authorization.vue
+++ b/packages/hoppscotch-app/components/http/Authorization.vue
@@ -109,7 +109,7 @@
        :src="`/images/states/${$colorMode.value}/login.svg`"
        loading="lazy"
        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-        :alt="$t('empty.authorization')"
+        :alt="`${$t('empty.authorization')}`"
      />
      <span class="text-center pb-4">
        {{ $t("empty.authorization") }}
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="bodyParameters">
+  <div>
    <div
      class="bg-primary border-b border-dividerLight flex flex-1 top-upperTertiaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
@@ -147,7 +147,7 @@
        :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
        loading="lazy"
        class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-        :alt="$t('empty.body')"
+        :alt="`${$t('empty.body')}`"
      />
      <span class="text-center pb-4">
        {{ $t("empty.body") }}
@@ -160,7 +160,7 @@
        @click.native="addBodyParam"
      />
    </div>
-  </AppSection>
+  </div>
 </template>

 <script lang="ts">
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="headers">
+  <div>
    <div
      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
@@ -145,7 +145,7 @@
        />
      </div>
    </div>
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="parameters">
+  <div>
    <div
      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
@@ -138,7 +138,7 @@
        />
      </div>
    </div>
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/components/http/PreRequestScript.vue
+++ b/packages/hoppscotch-app/components/http/PreRequestScript.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="script" :label="`${t('preRequest.script')}`">
+  <div>
    <div
      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
@@ -58,7 +58,7 @@
        </div>
      </div>
    </div>
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/components/http/RawBody.vue
+++ b/packages/hoppscotch-app/components/http/RawBody.vue
@@ -117,10 +117,11 @@ const prettifyRequestBody = () => {
    const jsonObj = JSON.parse(rawParamsBody.value)
    rawParamsBody.value = JSON.stringify(jsonObj, null, 2)
    prettifyIcon.value = "check"
-    setTimeout(() => (prettifyIcon.value = "wand"), 1000)
  } catch (e) {
    console.error(e)
+    prettifyIcon.value = "info"
    toast.error(`${t("error.json_prettify_invalid_body")}`)
  }
+  setTimeout(() => (prettifyIcon.value = "wand"), 1000)
 }
 </script>
--- a/packages/hoppscotch-app/components/http/Response.vue
+++ b/packages/hoppscotch-app/components/http/Response.vue
@@ -1,11 +1,11 @@
 <template>
-  <AppSection label="response">
+  <div>
    <HttpResponseMeta :response="response" />
    <LensesResponseBodyRenderer
      v-if="!loading && hasResponse"
      :response="response"
    />
-  </AppSection>
+  </div>
 </template>

 <script lang="ts">
--- a/packages/hoppscotch-app/components/http/TestResult.vue
+++ b/packages/hoppscotch-app/components/http/TestResult.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection :label="`${t('test.results')}`">
+  <div>
    <div
      v-if="
        testResults &&
@@ -88,7 +88,7 @@
        class="my-4"
      />
    </div>
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/components/http/Tests.vue
+++ b/packages/hoppscotch-app/components/http/Tests.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="script" :label="`${t('test.script')}`">
+  <div>
    <div
      class="bg-primary border-b border-dividerLight flex flex-1 top-upperSecondaryStickyFold pl-4 z-10 sticky items-center justify-between"
    >
@@ -58,7 +58,7 @@
        </div>
      </div>
    </div>
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/components/realtime/Mqtt.vue
+++ b/packages/hoppscotch-app/components/realtime/Mqtt.vue
@@ -13,10 +13,7 @@
          :size="COLUMN_LAYOUT ? 45 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="request">
-            <div
-              class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky"
-            >
+          <div class="bg-primary flex flex-col space-y-4 p-4 top-0 z-10 sticky">
            <div class="space-x-2 flex-1 inline-flex">
              <input
                id="mqtt-url"
@@ -61,15 +58,12 @@
              />
            </div>
          </div>
-          </AppSection>
        </Pane>
        <Pane
          :size="COLUMN_LAYOUT ? 65 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="response">
          <RealtimeLog :title="$t('mqtt.log')" :log="log" />
-          </AppSection>
        </Pane>
      </Splitpanes>
    </Pane>
@@ -79,7 +73,6 @@
      min-size="20"
      class="hide-scrollbar !overflow-auto"
    >
-      <AppSection label="messages">
      <div class="flex flex-col flex-1 p-4 inline-flex">
        <label for="pub_topic" class="font-semibold text-secondaryLight">
          {{ $t("mqtt.topic") }}
@@ -147,7 +140,6 @@
          @click.native="toggleSubscription"
        />
      </div>
-      </AppSection>
    </Pane>
  </Splitpanes>
 </template>
--- a/packages/hoppscotch-app/components/realtime/Socketio.vue
+++ b/packages/hoppscotch-app/components/realtime/Socketio.vue
@@ -13,7 +13,6 @@
          :size="COLUMN_LAYOUT ? 45 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="request">
          <div class="bg-primary flex p-4 top-0 z-10 sticky">
            <div class="space-x-2 flex-1 inline-flex">
              <div class="flex flex-1">
@@ -82,15 +81,12 @@
              />
            </div>
          </div>
-          </AppSection>
        </Pane>
        <Pane
          :size="COLUMN_LAYOUT ? 65 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="response">
          <RealtimeLog :title="$t('socketio.log')" :log="log" />
-          </AppSection>
        </Pane>
      </Splitpanes>
    </Pane>
@@ -100,7 +96,6 @@
      min-size="20"
      class="hide-scrollbar !overflow-auto"
    >
-      <AppSection label="messages">
      <div class="flex flex-col flex-1 p-4 inline-flex">
        <label for="events" class="font-semibold text-secondaryLight">
          {{ $t("socketio.events") }}
@@ -167,7 +162,6 @@
          </div>
        </div>
      </div>
-      </AppSection>
    </Pane>
  </Splitpanes>
 </template>
--- a/packages/hoppscotch-app/components/realtime/Sse.vue
+++ b/packages/hoppscotch-app/components/realtime/Sse.vue
@@ -45,14 +45,7 @@
      </div>
    </Pane>
    <Pane :size="COLUMN_LAYOUT ? 65 : 50" class="hide-scrollbar !overflow-auto">
-      <AppSection label="response">
-        <ul>
-          <li>
      <RealtimeLog :title="$t('sse.log')" :log="log" />
-            <div id="result"></div>
-          </li>
-        </ul>
-      </AppSection>
    </Pane>
  </Splitpanes>
 </template>
--- a/packages/hoppscotch-app/components/realtime/Websocket.vue
+++ b/packages/hoppscotch-app/components/realtime/Websocket.vue
@@ -13,7 +13,6 @@
          :size="COLUMN_LAYOUT ? 45 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="request">
          <div class="bg-primary flex p-4 top-0 z-10 sticky">
            <div class="space-x-2 flex-1 inline-flex">
              <input
@@ -133,15 +132,12 @@
              {{ $t("empty.protocols") }}
            </span>
          </div>
-          </AppSection>
        </Pane>
        <Pane
          :size="COLUMN_LAYOUT ? 65 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="response">
          <RealtimeLog :title="$t('websocket.log')" :log="log" />
-          </AppSection>
        </Pane>
      </Splitpanes>
    </Pane>
@@ -151,7 +147,6 @@
      min-size="20"
      class="hide-scrollbar !overflow-auto"
    >
-      <AppSection label="messages">
      <div class="flex flex-col flex-1 p-4 inline-flex">
        <label
          for="websocket-message"
@@ -182,7 +177,6 @@
          @click.native="sendMessage"
        />
      </div>
-      </AppSection>
    </Pane>
  </Splitpanes>
 </template>
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <AppSection label="teams">
+  <div>
    <div class="space-y-4 p-4">
      <ButtonSecondary
        :label="`${t('team.create_new')}`"
@@ -88,7 +88,7 @@
      :editing-team-i-d="editingTeamID"
      @hide-modal="displayModalInvite(false)"
    />
-  </AppSection>
+  </div>
 </template>

 <script setup lang="ts">
--- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
+++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts
@@ -31,6 +31,7 @@ import { lintKeymap } from "@codemirror/lint"
 export const baseTheme = EditorView.theme({
  "&": {
    fontSize: "var(--font-size-body)",
+    height: "100%",
  },
  ".cm-content": {
    caretColor: "var(--secondary-light-color)",
--- a/packages/hoppscotch-app/pages/documentation.vue
+++ b/packages/hoppscotch-app/pages/documentation.vue
@@ -13,7 +13,6 @@
          :size="COLUMN_LAYOUT ? 45 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="import">
          <div class="flex p-4 items-start justify-between">
            <label>
              {{ $t("documentation.generate_message") }}
@@ -66,13 +65,11 @@
              @click.native="getDoc"
            />
          </div>
-          </AppSection>
        </Pane>
        <Pane
          :size="COLUMN_LAYOUT ? 65 : 50"
          class="hide-scrollbar !overflow-auto"
        >
-          <AppSection label="documentation">
          <div class="flex flex-col">
            <div
              v-if="items.length === 0"
@@ -117,7 +114,6 @@
              <DocsCollection :collection="collection" />
            </div>
          </div>
-          </AppSection>
        </Pane>
      </Splitpanes>
    </Pane>
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -173,9 +173,7 @@
              </section>
            </SmartTab>
            <SmartTab :id="'teams'" :label="t('team.title')">
-              <AppSection label="teams">
              <Teams :modal="false" />
-              </AppSection>
            </SmartTab>
          </SmartTabs>
        </div>