Sign InSign Up

Duplicate “Follow” Button Text in User Profile Hover Card

AI Summary3 min read

TL;DR

A UI bug on Dev.to causes the Follow button in user profile hover cards to display duplicated text (e.g., FollowFollow), likely due to frontend rendering issues. This visual inconsistency may confuse users but does not affect functionality.

Tags

devbugsmashdevopsdiscussarchitectureUI bugfrontend renderinguser experienceDev.totooltip

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:

  1. Log in to Dev.to.
  2. Navigate to the main feed.
  3. Hover over any user’s avatar or username (e.g., from a post card).
  4. Observe the profile preview tooltip.
  5. 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.

Visit Website