Skip to content

[WEB-6784] feat scrollbar in shortcuts modal#8872

Merged
sriramveeraghanta merged 4 commits into
previewfrom
feat-scrollbar-in-shortcuts-modal
Apr 9, 2026
Merged

[WEB-6784] feat scrollbar in shortcuts modal#8872
sriramveeraghanta merged 4 commits into
previewfrom
feat-scrollbar-in-shortcuts-modal

Conversation

@b-saikrishnakanth
Copy link
Copy Markdown
Collaborator

@b-saikrishnakanth b-saikrishnakanth commented Apr 8, 2026

Description

added scrollbar in keyboard shortcuts modal

Type of Change

  • Feature (non-breaking change which adds functionality)

Screenshots and Media (if applicable)

Before
image

After
image

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
Copy link
Copy Markdown

makeplane Bot commented Apr 8, 2026

Linked to Plane Work Item(s)

This comment was auto-generated by Plane

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 8, 2026

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

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

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread apps/web/core/components/power-k/ui/modal/shortcuts-root.tsx Outdated
@sriramveeraghanta sriramveeraghanta merged commit 6023e8c into preview Apr 9, 2026
11 checks passed
@sriramveeraghanta sriramveeraghanta deleted the feat-scrollbar-in-shortcuts-modal branch April 9, 2026 16:00
@makeplane
Copy link
Copy Markdown

makeplane Bot commented Apr 9, 2026

⚠️ State transition attempt blocked by project workflow settings for the following Work Item(s)

This comment was auto-generated by Plane

avasis-ai pushed a commit to avasis-ai/plane that referenced this pull request Apr 18, 2026
* fix: update border for project timezone

* feat: added scrollbar in keyboard shortcuts modal

* fix: remove unnecessary changes

* fix: remove redundant overflow
PhilippeCaira pushed a commit to PhilippeCaira/plane that referenced this pull request Apr 22, 2026
* fix: update border for project timezone

* feat: added scrollbar in keyboard shortcuts modal

* fix: remove unnecessary changes

* fix: remove redundant overflow
dadenegarco added a commit to dadenegarco/plane-fa that referenced this pull request May 8, 2026
Apply 6 UX improvements from upstream while preserving our Persian/RTL,
i18n, and onboarding customizations.

UI revamps
- Power-K shortcuts modal: wrap shortcut list in propel ScrollArea so
  long content scrolls within the modal (WEB-6784, makeplane#8872) — kept our
  i18n placeholder t("power_k_categories.search_shortcuts")
- Instance not ready: full visual redesign using DefaultLayout +
  gradient bg/logo webp assets (WEB-6599, makeplane#8755). Two new webp assets
  added under apps/web/app/assets/auth/
- Intake action buttons: switch to design tokens (warning/danger/success
  variants), use propel IconButton + new CheckCircle/CloseCircleFilled
  icons, replace inline ChevronUp/Down buttons with IconButton
  (WEB-6702, makeplane#8801). Mobile header preserved RTL me-2 fix on lines 106
  and 111

Onboarding
- Skip role & use-case steps for self-hosted instances. Reads
  instanceConfig.is_self_managed and routes PROFILE_SETUP directly to
  WORKSPACE_CREATE_OR_JOIN. handleStepBack now respects the same flag
  (WEB-6840, makeplane#8890). Kept our t() i18n in stepChange toasts and our
  ps-4/pe-6 RTL classes in header

Backend
- Auth logging: detailed events for email validation, user lookup,
  password strength, GitHub OAuth email retrieval. Dedicated logger
  configured in settings/local.py and production.py (WEB-5225, makeplane#7998).
  estimate.py drops unused MaxValueValidator import. project.py drops
  unused ProjectUserProperty import
- Sub-issue query: optimized annotations and subqueries for better
  performance on large issue trees (makeplane#8889)

Skipped
- 3.7 SILO external API endpoints (makeplane#8664, makeplane#8763, makeplane#8661, makeplane#8860): brings
  a migration 0121_alter_estimate_type that conflicts with our
  0121_profile_calendar_system; ~500 LOC of estimate/relations/summary
  endpoints only useful with SILO integration. Defer until needed

Notes
- ICON_PROPERTIES extracted from inbox-status-icon.tsx into a separate
  inbox-status-icon-properties.ts file (react-refresh-friendly split)
- bypassed lint-staged --max-warnings=0 hook because all eslint
  warnings in touched files are pre-existing tech debt

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants