chore: minor ui improvements (#3274)

packages/hoppscotch-common/src/components/app/PaneLayout.vue

@@ -18,13 +18,18 @@
         :horizontal="COLUMN_LAYOUT"
         @resize="setPaneEvent($event, 'horizontal')"
       >
-        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
+        <Pane
+          :size="PANE_MAIN_TOP_SIZE"
+          class="flex flex-col !overflow-auto"
+          min-size="25"
+        >
           <slot name="primary" />
         </Pane>
         <Pane
           v-if="hasSecondary"
           :size="PANE_MAIN_BOTTOM_SIZE"
           class="flex flex-col !overflow-auto"
+          min-size="25"
         >
           <slot name="secondary" />
         </Pane>
@@ -33,7 +38,7 @@
     <Pane
       v-if="SIDEBAR && hasSidebar"
       :size="PANE_SIDEBAR_SIZE"
-      min-size="20"
+      min-size="25"
       class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />
@@ -78,10 +83,10 @@ type PaneEvent = {
   size: number
 }
 
-const PANE_MAIN_SIZE = ref(74)
+const PANE_MAIN_SIZE = ref(70)
-const PANE_SIDEBAR_SIZE = ref(26)
+const PANE_SIDEBAR_SIZE = ref(30)
-const PANE_MAIN_TOP_SIZE = ref(42)
+const PANE_MAIN_TOP_SIZE = ref(35)
-const PANE_MAIN_BOTTOM_SIZE = ref(58)
+const PANE_MAIN_BOTTOM_SIZE = ref(65)
 
 if (!COLUMN_LAYOUT.value) {
   PANE_MAIN_TOP_SIZE.value = 50

packages/hoppscotch-common/src/components/app/ShortcutsPrompt.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col items-center justify-center text-secondaryLight">
-    <div class="flex pb-4 my-4 space-x-2">
+    <div class="flex mb-4 space-x-2">
       <div class="flex flex-col items-end space-y-4 text-right">
         <span class="flex items-center flex-1">
           {{ t("shortcut.request.send_request") }}

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -81,7 +81,6 @@
             <HoppButtonSecondary
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
               @click="addEnvironmentVariable"
             />
           </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/environments/my/index.vue

@@ -42,7 +42,6 @@
         :label="`${t('add.new')}`"
         filled
         outline
-        class="mb-4"
         @click="displayModalAdd(true)"
       />
     </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/environments/teams/Details.vue

@@ -86,13 +86,11 @@
               disabled
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
             />
             <HoppButtonSecondary
               v-else
               :label="`${t('add.new')}`"
               filled
-              class="mb-4"
               @click="addEnvironmentVariable"
             />
           </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/environments/teams/index.vue

@@ -54,7 +54,6 @@
         v-tippy="{ theme: 'tooltip' }"
         disabled
         filled
-        class="mb-4"
         :icon="IconPlus"
         :title="t('team.no_access')"
         :label="t('action.new')"
@@ -64,7 +63,6 @@
         :label="`${t('add.new')}`"
         filled
         outline
-        class="mb-4"
         @click="displayModalAdd(true)"
       />
     </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/graphql/Authorization.vue

@@ -127,7 +127,6 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -166,7 +166,6 @@
         :label="`${t('add.new')}`"
         filled
         :icon="IconPlus"
-        class="mb-4"
         @click="addHeader"
       />
     </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/http/Authorization.vue

@@ -126,7 +126,6 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
     </HoppSmartPlaceholder>
     <div v-else class="flex flex-1 border-b border-dividerLight">

packages/hoppscotch-common/src/components/http/Body.vue

@@ -117,7 +117,6 @@
         blank
         :icon="IconExternalLink"
         reverse
-        class="mb-4"
       />
     </HoppSmartPlaceholder>
   </div>

packages/hoppscotch-common/src/components/http/BodyParameters.vue

@@ -162,7 +162,6 @@
         :label="`${t('add.new')}`"
         filled
         :icon="IconPlus"
-        class="mb-4"
         @click="addBodyParam"
       />
     </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -213,7 +213,6 @@
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
-          class="mb-4"
           @click="addHeader"
         />
       </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/http/Parameters.vue

@@ -161,7 +161,6 @@
           :label="`${t('add.new')}`"
           :icon="IconPlus"
           filled
-          class="mb-4"
           @click="addParam"
         />
       </HoppSmartPlaceholder>

packages/hoppscotch-common/src/components/http/URLEncodedParams.vue

@@ -153,7 +153,6 @@
           filled
           :label="`${t('add.new')}`"
           :icon="IconPlus"
-          class="mb-4"
           @click="addUrlEncodedParam"
         />
       </HoppSmartPlaceholder>

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -71,7 +71,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const selectedEnvType = getSelectedEnvironmentType()
 
-      const envTypeIcon = `<span class="inline-flex -my-2 -mx-0.5 opacity-65 items-center text-base font-icon">${
+      const envTypeIcon = `<span class="inline-flex items-center opacity-65 -mx-0.5 text-base font-icon">${
         selectedEnvType === "TEAM_ENV" ? "group" : "person"
       }</span>`
 
@@ -88,7 +88,7 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
             variableName: parsedEnvKey,
           })
         })
-        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 -my-2 text-base font-icon">edit</span>`
+        editIcon.innerHTML = `<span class="inline-flex items-center px-1 -mx-1 text-base font-icon">edit</span>`
         tooltip.appendChild(editIcon)
       }
 

packages/hoppscotch-common/src/pages/profile.vue

@@ -16,7 +16,6 @@
         >
           <HoppButtonPrimary
             :label="t('auth.login')"
-            class="mb-4"
             @click="invokeAction('modals.login.toggle')"
           />
         </HoppSmartPlaceholder>

packages/hoppscotch-common/src/pages/realtime/socketio.vue

@@ -203,7 +203,6 @@
               blank
               :icon="IconExternalLink"
               reverse
-              class="mb-4"
             />
           </HoppSmartPlaceholder>
           <div

packages/hoppscotch-ui/src/components/smart/Modal.vue

@@ -44,7 +44,6 @@
               </h3>
               <span class="flex items-center">
                 <slot name="actions"></slot>
-                <kbd class="mr-2 shortcut-key">ESC</kbd>
                 <HoppButtonSecondary
                   v-if="dimissible"
                   v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
@@ -109,21 +108,22 @@ const { t, onModalOpen, onModalClose } =
 
 withDefaults(
   defineProps<{
-    dialog: boolean,
+    dialog: boolean
-    title: string,
+    title: string
-    dimissible: boolean,
+    dimissible: boolean
-    placement: string,
+    placement: string
-    fullWidth: boolean,
+    fullWidth: boolean
-    styles: string,
+    styles: string
-    closeText: string | null,
+    closeText: string | null
-  }>(), {
+  }>(),
+  {
     dialog: false,
     title: "",
     dimissible: true,
     placement: "top",
     fullWidth: false,
     styles: "sm:max-w-lg",
-    closeText: null
+    closeText: null,
   }
 )
 

packages/hoppscotch-ui/src/components/smart/Placeholder.vue

@@ -4,7 +4,7 @@
       v-if="src"
       :src="src"
       loading="lazy"
-      class="inline-flex flex-col object-contain object-center my-4"
+      class="inline-flex flex-col object-contain object-center mb-4"
       :class="large ? 'w-32 h-32' : 'w-16 h-16'"
       :alt="alt"
     />

packages/hoppscotch-ui/src/components/smart/SlideOver.vue

@@ -1,17 +1,28 @@
 <template>
   <div>
     <Transition name="fade" appear>
-      <div v-if="show" class="fixed inset-0 z-20 transition-opacity" @keydown.esc="close()">
+      <div
-        <div class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none" tabindex="0" @click="close()"></div>
+        v-if="show"
+        class="fixed inset-0 z-20 transition-opacity"
+        @keydown.esc="close()"
+      >
+        <div
+          class="absolute inset-0 bg-primaryLight opacity-90 focus:outline-none"
+          tabindex="0"
+          @click="close()"
+        ></div>
       </div>
     </Transition>
     <Transition name="slide" appear>
-      <aside v-if="show"
+      <aside
-        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96">
+        v-if="show"
-        <div class="flex items-center justify-between p-2 border-b border-dividerLight">
+        class="fixed top-0 right-0 z-30 flex flex-col h-full max-w-full overflow-auto border-l shadow-xl border-dividerDark bg-primary w-96"
+      >
+        <div
+          class="flex items-center justify-between p-2 border-b border-dividerLight"
+        >
           <h3 class="ml-4 heading">{{ title }}</h3>
           <span class="flex items-center">
-            <kbd class="mr-2 shortcut-key">ESC</kbd>
             <HoppButtonSecondary :icon="IconX" @click="close()" />
           </span>
         </div>