[WEB-6784] feat scrollbar in shortcuts modal

apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx

@@ -8,6 +8,7 @@ import { useState, Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 // plane imports
 import { CloseIcon, SearchIcon } from "@plane/propel/icons";
+import { ScrollArea } from "@plane/propel/scrollarea";
 import { Input } from "@plane/ui";
 // hooks
 import { usePowerK } from "@/hooks/store/use-power-k";
@@ -61,28 +62,33 @@ export function ShortcutsModal(props: Props) {
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
               <Dialog.Panel className="relative flex h-full items-center justify-center">
-                <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 p-5 shadow-raised-200 transition-all sm:w-[28rem]">
-                  <Dialog.Title as="h3" className="flex justify-between">
+                <div className="flex h-[61vh] w-full flex-col space-y-4 overflow-hidden rounded-lg bg-surface-1 py-5 shadow-raised-200 transition-all sm:w-[28rem]">
+                  <Dialog.Title as="h3" className="flex justify-between px-5">
                     <span className="text-16 font-medium">Keyboard shortcuts</span>
                     <button type="button" onClick={handleClose}>
                       <CloseIcon className="h-4 w-4 text-secondary hover:text-primary" aria-hidden="true" />
                     </button>
                   </Dialog.Title>
-                  <div className="flex w-full items-center rounded-sm border-[0.5px] border-subtle bg-surface-2 px-2">
-                    <SearchIcon className="h-3.5 w-3.5 text-secondary" />
-                    <Input
-                      id="search"
-                      name="search"
-                      type="text"
-                      value={query}
-                      onChange={(e) => setQuery(e.target.value)}
-                      placeholder="Search for shortcuts"
-                      className="w-full border-none bg-transparent py-1 text-11 text-secondary outline-none"
-                      autoFocus
-                      tabIndex={1}
-                    />
+                  <div className="px-5">
+                    <div className="flex w-full items-center rounded-sm border-[0.5px] border-subtle bg-surface-2 px-2">
+                      <SearchIcon className="h-3.5 w-3.5 text-secondary" />
+                      <Input
+                        id="search"
+                        name="search"
+                        type="text"
+                        value={query}
+                        onChange={(e) => setQuery(e.target.value)}
+                        placeholder="Search for shortcuts"
+                        className="w-full border-none bg-transparent py-1 text-11 text-secondary outline-none"
+                        autoFocus
+                        tabIndex={1}
+                      />
+                    </div>
                   </div>
-                  <ShortcutRenderer searchQuery={query} commands={allCommandsWithShortcuts} />
+
+                  <ScrollArea size="sm" rootClassName="overflow-y-scroll px-5">
+                    <ShortcutRenderer searchQuery={query} commands={allCommandsWithShortcuts} />
+                  </ScrollArea>
                 </div>
               </Dialog.Panel>
             </Transition.Child>

apps/web/core/components/power-k/ui/renderer/shortcut.tsx

@@ -78,7 +78,7 @@ export function ShortcutRenderer(props: Props) {
   const isShortcutsEmpty = groupedCommands.length === 0;
 
   return (
-    <div className="flex flex-col gap-y-3 overflow-y-auto">
+    <div className="flex flex-col gap-y-3">
       {!isShortcutsEmpty ? (
         groupedCommands.map((group) => (
           <div key={group.key}>