refactor: minor ui improvements

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>

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>

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>

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="border-b border-dividerLight flex flex-col py-4 px-6">
-      <div class="bg-primary border-b border-dividerLight">
-        <div class="flex flex-col my-4 mx-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
+      <div v-if="filterText" class="divide-dividerLight divide-y flex flex-col">
-        v-if="filterText"
-        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
-      >
         <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
+      <div v-else class="divide-dividerLight divide-y flex flex-col">
-        v-else
-        class="divide-dividerLight divide-y flex flex-col flex-1 overflow-auto hide-scrollbar"
-      >
         <div
           v-for="(map, mapIndex) in mappings"
           :key="`map-${mapIndex}`"

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>

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

packages/hoppscotch-app/components/collections/graphql/index.vue

@@ -1,8 +1,5 @@
 <template>
-  <AppSection
+  <div :class="{ 'rounded border border-divider': savingMode }">
-    label="collections"
-    :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>

packages/hoppscotch-app/components/collections/index.vue

@@ -1,19 +1,16 @@
 <template>
-  <AppSection
+  <div :class="{ 'rounded border border-divider': saveRequest }">
-    label="collections"
-    :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>

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

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

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

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

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>

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

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

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

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

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

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

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>

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

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

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

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>

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>

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>

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>

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

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

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>

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>