Fix: Scrollability issue of users list for discord users#934
Fix: Scrollability issue of users list for discord users#934shantanu-02 wants to merge 3 commits intoRealDevSquad:developfrom
Conversation
Achintya-Chatterjee
left a comment
Achintya-Chatterjee
left a comment
There was a problem hiding this comment.
test screenshot is missing
It was just the UX issue...so didn't update/write any tests. |
@shantanu-02 you have to update the test screenshot, it's mandatory |
|
Hello @shantanu-02 can you please attach the test coverage screenshot |
|
|
||
| createElement('div', { class: 'users_section' }, [ | ||
| UsersSection({ | ||
| users, | ||
| showUser, | ||
| handleUserSelected, | ||
| }), | ||
| ]), | ||
|
|
||
| createElement('div', { class: 'user_details_section' }, [ | ||
| UserDetailsSection({ user: users[showUser] ?? {} }), | ||
| ]), |
There was a problem hiding this comment.
Do we need to create the div here?
WalkthroughThe changes update the component structure and styling in the Discord-related user interface. In the App component, the Changes
Sequence Diagram(s)Poem
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
users/discord/style.css (2)
66-71: User Details Section Sticky PositioningSwitching the
.user_details_sectionto useposition: stickyand setting its height to 100% helps maintain its visibility during scroll. To ensure consistent sticky behavior across all browsers, please consider adding an explicittop: 0;property. For example:.user_details_section { padding: 1rem; background-color: var(--light-gray); + top: 0; position: sticky; height: 100%; }
73-76: Minor Formatting ConsistencyThe annotation on the closing block of
.user_details_field(line 76, marked with "~") may indicate a minor formatting change. Please double-check that this change is intentional and consistent with the rest of the file’s formatting.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
users/discord/App.js(1 hunks)users/discord/components/UserDetailsSection.js(0 hunks)users/discord/style.css(3 hunks)
💤 Files with no reviewable changes (1)
- users/discord/components/UserDetailsSection.js
✅ Files skipped from review due to trivial changes (1)
- users/discord/App.js
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: Analyze (javascript)
🔇 Additional comments (2)
users/discord/style.css (2)
12-20: Main Element Height ConfigurationThe addition of
height: 100%to themainelement ensures that it stretches to fill its container, which is important for the proper layout of internal grid areas. Make sure that its parent containers (e.g.,htmlandbody) are also set toheight: 100%to avoid potential layout issues.
41-47: Users Section Scrollability EnhancementThe
.users_sectionnow includesoverflow-y: autoandmax-height: 20rem, which localizes scrolling to the users list. This change should effectively resolve the scrollability issue for Discord users. Consider verifying that the fixedmax-heightis appropriate across different screen sizes or if responsiveness adjustments are needed in the future.
6 participants
Date: 05/01/2025
Developer Name: Shantanu Pawar
Issue Ticket Number
Description
Made a separate container for the list of users so that the scrollability of the list doesn't affect the whole page.
Documentation Updated?
Under Feature Flag
Database Changes
Breaking Changes
Development Tested?
Screenshots
Screenshot recording 1
Screen.Recording.2025-01-05.142752.mp4
Test Coverage
Screenshot 1
Additional Notes
Summary by CodeRabbit
Refactor
Style