chore: minor ui improvements

packages/hoppscotch-app/assets/scss/styles.scss

@@ -455,6 +455,7 @@ pre.ace_editor {
   @apply px-1;
   @apply border border-dividerDark;
   @apply shadow-sm;
+  @apply <sm:hidden;
 }
 
 .capitalize-first {

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

@@ -11,22 +11,19 @@
     <Pane
       :size="PANE_MAIN_SIZE"
       min-size="65"
-      class="hide-scrollbar !overflow-auto flex flex-col"
+      class="flex flex-col !overflow-auto"
     >
       <Splitpanes
         class="smart-splitter"
         :horizontal="COLUMN_LAYOUT"
         @resize="setPaneEvent($event, 'horizontal')"
       >
-        <Pane
+        <Pane :size="PANE_MAIN_TOP_SIZE" class="flex flex-col !overflow-auto">
-          :size="PANE_MAIN_TOP_SIZE"
-          class="hide-scrollbar !overflow-auto flex flex-col"
-        >
           <slot name="primary" />
         </Pane>
         <Pane
           :size="PANE_MAIN_BOTTOM_SIZE"
-          class="flex flex-col hide-scrollbar !overflow-auto"
+          class="flex flex-col !overflow-auto"
         >
           <slot name="secondary" />
         </Pane>
@@ -36,7 +33,7 @@
       v-if="SIDEBAR && hasSidebar"
       :size="PANE_SIDEBAR_SIZE"
       min-size="20"
-      class="!overflow-auto flex flex-col bg-primaryContrast"
+      class="flex flex-col !overflow-auto bg-primaryContrast"
     >
       <slot name="sidebar" />
     </Pane>

packages/hoppscotch-app/src/components/app/Shortcuts.vue

@@ -20,7 +20,7 @@
           open
         >
           <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
           >
             <icon-lucide-chevron-right class="mr-2 indicator" />
             <span
@@ -55,7 +55,7 @@
           open
         >
           <summary
-            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold transition cursor-pointer focus:outline-none text-secondaryLight hover:text-secondaryDark"
+            class="flex items-center flex-1 min-w-0 px-6 py-4 font-semibold cursor-pointer transition focus:outline-none text-secondaryLight hover:text-secondaryDark"
           >
             <icon-lucide-chevron-right class="mr-2 indicator" />
             <span

packages/hoppscotch-app/src/components/button/Primary.vue

@@ -41,11 +41,11 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length" class="ml-2 <sm:hidden">
+      <div v-if="shortcut.length" class="<sm:hidden">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="shortcut-key !bg-accentLight"
+          class="shortcut-key !bg-accentDark !border-accentLight"
         >
           {{ key }}
         </kbd>

packages/hoppscotch-app/src/components/button/Secondary.vue

@@ -42,11 +42,11 @@
         ]"
       />
       {{ label }}
-      <div v-if="shortcut.length" class="ml-2 <sm:hidden">
+      <div v-if="shortcut.length" class="<sm:hidden">
         <kbd
           v-for="(key, index) in shortcut"
           :key="`key-${index}`"
-          class="shortcut-key"
+          class="shortcut-key !bg-inherit"
         >
           {{ key }}
         </kbd>