List Card Follow button overflowing when long username

[krishnaGauss]

Problem

In the Lists section of any book, the "Follow" button is partially obscured by a gradient overlay, making it difficult to see and interact with. Additionally, usernames that are longer than the display area should have hover tips to view their full name.

One can navigate to https://openlibrary.org/works/OL17843967W/Everything_Everything?edition=key%3A/books/OL28806695M for seeing this issue.

Reproducing the bug

1. Go to ... https://openlibrary.org/works/OL17843967W/Everything_Everything?edition=key%3A/books/OL28806695M
2. Do ... Scroll down to LISTS

• Expected behavior: The list card components appear normally.
• Actual behavior: The follow button for various components are either hidden or overlapping.

Context

• Browser (Chrome, Safari, Firefox, etc): Chrome, Safari, Firefox
• OS (Windows, Mac, etc): Windows, Mac
• Logged in (Y/N): Y
• Environment (prod, dev, local): prod

Breakdown

Requirements Checklist

• Ensure the "Follow" button is fully visible and not hidden by any gradient or overlay.

• Modify the username display to truncate long usernames with ellipsis (...).

• Implement a hover tooltip that shows the full username on mouse hover.

• Verify responsiveness so that UI elements (button, usernames) behave correctly on different screen sizes.

• Test that the "Follow" button remains clickable and accessible after the fix.

Related files

• list-follow.less
• list_follow.html

Stakeholders

• @mekarpeles

---

Instructions for Contributors

• Please run these commands to ensure your repository is up to date before creating a new branch to work on this issue and each time after pushing code to Github, because the pre-commit bot may add commits to your PRs upstream.

[krishnaGauss]

@mekarpeles I would like to contribute to this issue and kindly request you to assign it to me.