[WEB-6784] feat scrollbar in shortcuts modal

[b-saikrishnakanth]

Description

added scrollbar in keyboard shortcuts modal

Type of Change

• Feature (non-breaking change which adds functionality)

Screenshots and Media (if applicable)

Before

After

Test Scenarios

References

Summary by CodeRabbit

• New Features

  • Added vertical scrolling for shortcuts and results within the modal, improving navigation of large lists.

• Improvements

  • Adjusted modal spacing and padding for better visual balance and layout consistency.

[makeplane]

Linked to Plane Work Item(s)

• [WEB-6784] Missing Scrollbar in Keyboard Shortcuts Modal

This comment was auto-generated by Plane

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 84c886ac-0373-4041-8c08-bd89f2797a60

📥 Commits

Reviewing files that changed from the base of the PR and between 5240b00 and 224bcf4.

📒 Files selected for processing (2)

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

✅ Files skipped from review due to trivial changes (1)

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

🚧 Files skipped from review as they are similar to previous changes (1)

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

---

📝 Walkthrough

Walkthrough

Two component files were modified to relocate scrolling responsibility from the ShortcutRenderer component to its parent modal wrapper. A ScrollArea component now handles vertical scrolling of the shortcuts section, while the container layout was adjusted for consistent padding and spacing across modal elements.

Changes

Cohort / File(s)	Summary
Modal Scrolling Refactor apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx	Added ScrollArea wrapper with size="sm" to make shortcuts/results section vertically scrollable. Restructured padding: changed container from p-5 to py-5, added px-5 to Dialog.Title, and wrapped search input in dedicated px-5 container.
ShortcutRenderer Styling apps/web/core/components/power-k/ui/renderer/shortcut.tsx	Removed overflow-y-auto Tailwind class from outer div wrapper; scrolling now handled by parent ScrollArea component.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 A modal finds balance at last,
Scrolling moved swift, like clouds that fly past.
Padding aligned with ScrollArea's grace,
The shortcuts now flow through their rightful place! 📜✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding a scrollbar to the keyboard shortcuts modal, with clear reference to the ticket number.
Description check	✅ Passed	The description covers the main change and includes the required Type of Change selection and before/after screenshots, though test scenarios are missing.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat-scrollbar-in-shortcuts-modal

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx`:
- Around line 89-96: The ScrollArea wrapper and internal shortcuts component are
declaring competing overflow styles; remove the redundant overflow declarations
so ScrollArea manages scrolling exclusively: in the component rendering the
ScrollArea (where ScrollArea is used with scrollType="always" and
orientation="vertical") remove "overflow-y-scroll" from the container className,
and in the ShortcutRenderer component (the root div in shortcut.tsx) remove the
"overflow-y-auto"/overflow styles so ShortcutRenderer no longer creates its own
scroll container; keep ScrollArea props as-is and ensure only ScrollArea
provides scrolling.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0dc5ba50-03a1-4b2f-b383-142158ec21e5

📥 Commits

Reviewing files that changed from the base of the PR and between 77c4b9c and 5240b00.

📒 Files selected for processing (2)

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