Verified Production Fix
[gitlab-org/gitlab] Reaction picker has two vertical scrollbars
GL-gitlab-org/gitlab#592668 • Mar 07, 2026
### ROOT CAUSE
The reaction picker panel is both scrollable and positioned within another scrollable container (like a comment list), leading to two vertical scrollbars when the panel's content exceeds its height.
### CODE FIX
To fix the double scrollbar issue, modify the reaction picker panel's CSS to ensure it doesn't introduce its own scrollbar when already within a scrollable context. Adjust the panel's height and overflow properties.
**Step-by-Step Explanation:**
1. **Identify the Scrollable Containers:** The reaction picker panel is inside a scrollable container (e.g., a comment list). This causes both containers to display scrollbars when their content overflows.
2. **Modify the Panel's Height:** Set the reaction picker panel's height to `auto` or a dynamic value based on available space to prevent it from needing an internal scrollbar.
3. **Remove Overflow Property:** Remove `overflow-y: auto` from the reaction picker's CSS to prevent it from creating its own scrollbar.
4. **Adjust Z-Index if Needed:** Ensure the panel's z-index is correct so it overlays properly without causing layout issues.
**Code Fix:**
css
/* Modify the reaction picker panel styles */
.reaction-picker-panel {
/* Remove fixed height to allow dynamic sizing */
height: auto;
/* Remove overflow to prevent internal scrollbar */
overflow-y: hidden;
}
/* Ensure the panel fits within the parent container */
.parent-container {
/* Adjust height or other properties as needed */
height: 100%;
}
This fix ensures the reaction picker panel doesn't create its own scrollbar, resolving the double scrollbar issue.
Deploy with DigitalOcean
Use this fix in production instantly. Claim your $200 developer credit.
Get Started →
digital