Skip to content

fix: add scroll to Quick Notes panel to prevent UI overflow#1572

Open
Tamcodes4 wants to merge 1 commit into
aryandas2911:mainfrom
Tamcodes4:fix/quick-notes-overflow
Open

fix: add scroll to Quick Notes panel to prevent UI overflow#1572
Tamcodes4 wants to merge 1 commit into
aryandas2911:mainfrom
Tamcodes4:fix/quick-notes-overflow

Conversation

@Tamcodes4

Copy link
Copy Markdown

📌 Description

Added a maximum height and internal scroll to the Quick Notes panel on the Tasks page to prevent it from overflowing and overlapping the main UI when multiple notes are added.

🔗 Related Issue

Closes #1389

🛠 Changes Made

  • Added max-h-[70vh] overflow-y-auto to the desktop Quick Notes popover div in Tasks.jsx
  • Added max-h-[50vh] overflow-y-auto to the mobile Quick Notes div in Tasks.jsx
  • Added .notes-scroll custom scrollbar styles in index.css to match the app's theme

📸 Screenshots (if applicable)

Before

image

After

image image

✅ Checklist

  • Code runs locally
  • Followed project structure
  • No console errors
  • Properly tested changes
  • Linked the issue

🚀 Notes for Reviewers

The Quick Notes panel previously expanded indefinitely when notes were added, pushing page content down. The fix constrains the panel height and adds a themed scrollbar so notes scroll within the panel without affecting the layout.

@Tamcodes4

Copy link
Copy Markdown
Author

Hey @aryandas2911, kindly review this pr and let me know if it has any issues or any changes I can do!

@Tamcodes4

Copy link
Copy Markdown
Author

Hey @aryandas2911, could you review this pr?

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.

[BUG]: Quick Notes panel overlaps and breaks UI layout when multiple notes are added

1 participant