(Fix)-Address scrolling issue in CommentSection #6661
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
✅ Deploy Preview for care-egov-staging ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@mathew-alex If any additional adjustments are needed, kindly inform me. |
|
@mathew-alex please review it |
|
@nihal467 will be testing it this week |
|
@parthksingh1 it still doesn't look like a good UI, the entire right side is empty, try doing a mock for the page where we can try looking effectively rearrange the page cards, to better space utilization |
|
Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions. |
|
@parthksingh1 what is the update on this PR, and the mock-up design |
|
Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions. |
|
yes working on it, was confused with the design that what to implement . |
|
@nihal467 please can you give me some suggestions what should UI be looking, I tried implementing many but nothing looked great , if you have any suggestions please let me know |
|
@parthksingh1 can you post the mock design you worked on, so we can give some suggestion |
|
Hi, This pr has been automatically marked as stale because it has not had any recent activity. It will be automatically closed if no further activity occurs for 7 more days. Thank you for your contributions. |
|
Hi, @gigincg, @nihal467, @khavinshankar, @mathew-alex, This pr has been automatically closed because it has not had any recent activity. Thank you for your contributions. Feel free to repopen the pr. |
WHAT
To specifically address the issue of the page scrolling to the bottom when multiple comments were posted, we implemented the following modifications to the CommentSection component:
Container Restructuring: Introduced a max-h-[400px] overflow-y-auto styling to the container housing the comment list. This adjustment ensures that the comment section is limited to a maximum height of 400 pixels and provides a scrollbar for easy navigation, preventing the entire page from stretching to the bottom.
Pagination Button Placement: Aligned the pagination button to be below the comment list, ensuring it does not interfere with the overall page scroll. By placing it within the confined space of the comment section, users can scroll through comments without affecting the position of the pagination button.
These changes effectively restrict the scroll behavior to the comment section, providing a more controlled and intuitive user experience. Users can now scroll within the comments without unintentionally navigating to the bottom of the page.
Proposed Changes
Added max-h-[400px] overflow-y-auto styling to the container wrapping the comment list.
This styling limits the maximum height of the comment section to 400 pixels and introduces a vertical scrollbar when the
content exceeds this height
-Pagination Button Placement:
Positioned the pagination button below the comment list.
This adjustment ensures that the pagination button is confined within the limited space of the comment section, preventing it from interfering with the overall page scroll.
These changes collectively restrict the scrolling behavior to the comment section, preventing the entire page from stretching to the bottom when multiple comments are posted. Users can now scroll through comments independently without affecting the scroll position of the entire page.
@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers
Merge Checklist
HOW
-Step 1: Identify the Issue
Recognize the problem: When posting multiple comments, the page was stretching to the bottom.
-Step 2: Analyze the Code
Inspect the CommentSection component in the codebase to understand the existing styling and structure.
-Step 3: Introduce Container Styling
Added max-h-[400px] overflow-y-auto styling to the container wrapping the comment list.
This restricts the maximum height of the comment section to 400 pixels.
Enables a vertical scrollbar when the content exceeds the specified height.
-Step 4: Adjust Pagination Button Placement
Positioned the pagination button below the comment list.
Ensured that the pagination button is confined within the limited space of the comment section.
-Step 5: Test the Changes
Checked the modified CommentSection component to ensure that scrolling is now limited to the comment section, preventing the entire page from stretching.
Video of Change-
Care.issue6637.mp4
ScreenShot-
