Description:
While navigating the Dev.to feed, I noticed a UI inconsistency: the Follow button in the user profile hover card displays duplicated text. When hovering over a user’s avatar or username, the tooltip preview shows overlapping “Follow” labels, e.g., FollowFollow. This seems to be a frontend rendering issue, likely caused by double-rendering the button label or an unexpected state duplication.
Steps to Reproduce:
- Log in to Dev.to.
- Navigate to the main feed.
- Hover over any user’s avatar or username (e.g., from a post card).
- Observe the profile preview tooltip.
- Note the Follow button inside the tooltip displays duplicated text: FollowFollow.
Expected Behavior:
The profile preview tooltip should display a single, properly styled Follow button with one label. The behavior should match other follow interactions across the site, maintaining UI consistency.
Actual Behavior:
- The Follow button appears with duplicated text inside the tooltip.
- This creates a visually inconsistent and potentially confusing user experience.
Technical Observations / Additional Context:
- The issue is consistently reproducible on hover.
-
Likely caused by frontend rendering or state duplication, possibly due to:
- Double-rendering of the button label
- Incorrect conditional UI state handling in React/JSX
Verified not caused by browser extensions (tested with all extensions disabled).
Occurs in dark mode; light mode not yet tested.
Could affect accessibility if screen readers interpret both labels.
Environment (Desktop):
- OS: Windows 10
- Browser: Chrome 144.0.0.0 (64-bit)
- Browser extensions: Disabled
Environment (Mobile):
- Device: N/A
- OS, version: N/A
- Browser, version: N/A
Screenshots:
Possible Fix Suggestions:
- Inspect the component responsible for rendering the Follow button in the tooltip.
- Ensure the label is not rendered twice due to conditional logic or state duplication.
- Verify that hover-triggered tooltips reuse the same Follow button component rather than instantiating multiple copies.
- Test across light and dark modes for consistent rendering.
Severity: Low to Medium – primarily a visual/UX inconsistency, but it may confuse users.
Notes:
- The bug does not prevent following/unfollowing functionality.
- Could be a minor React/JSX rendering glitch, possibly due to new updates in the tooltip component.
Top comments (12)
I don't have this problem on:
Is it possible that this is a specific issue with the version of Chrome?
Good Question.
I also sometimes get this problem, I am not sure, but anyway this is bug🤣.
That's true, I think I've seen it too once or twice but I think I ignored it lol. My best guess is that it might be a bug on certain configurations.
Yes.
So I have sent it to support team.
Good catch. I've been noticing this too - the hover card seems to render the button text twice. Probably a Preact hydration issue where the server-rendered label and the client-side component both inject the text.
Nice bug report format by the way. Clear steps to reproduce, expected vs actual, and a screenshot. More bug reports should look like this.
That’s a sharp observation — you explained the hydration issue really clearly, and that kind of root-cause thinking is impressive. And thank you for the kind words about the bug report format — I’m glad it was clear and structured well!
Thanks! Hydration mismatches are one of those things you start seeing everywhere once you know what to look for. Your bug report made it easy to pinpoint since you laid out the exact DOM structure. That kind of detail saves maintainers a lot of time.
Appreciate that — I’ve learned that the fastest way to solve hydration issues is to make the DOM differences undeniable. If we can make the server and client output explicit, the root cause usually reveals itself quickly.
Nice bug catch man, and really good description
Thanks a lot, I really appreciate that! 🙌 I’m glad the description was clear — I’ve been trying to be more thorough so the team can move faster and fix things smoothly.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.