MyVideoGameList/myvideogamelist.com

Fork 0

Fix My Consoles Tooltip Clipping on Profile Pages #764

New issue

Closed

opened 2026-06-19 14:13:30 -05:00 by Veilor · 1 comment

Veilor commented

2026-06-19 14:13:30 -05:00

Member

The profile My Consoles section should show readable platform labels when users hover or focus console icons, including bottom-row and single-console layouts.

A Discord report noted that labels on the dev site can be cut off, making it hard to tell which platform an icon represents. The profile page should keep the compact icon grid while allowing tooltip text to remain visible.

Scope

Public profile My Consoles section.
Console icon tooltip positioning and clipping behavior.
Hover and keyboard-focus tooltip visibility.
Long platform names in the console grid.
Existing icon order, text fallback, and light/dark styling.

Acceptance Criteria

Console tooltip labels are fully readable when the console is in the bottom row.
Console tooltip labels are fully readable when the user has only one console.
Tooltip text remains available on hover and keyboard focus.
The containing profile card does not clip the visible tooltip.
Existing console icon order and duplicate filtering stay unchanged.
Platforms without icons still render the existing text fallback.
The fix works in light and dark mode without disrupting the profile layout.

Test Coverage Required

Extend UserProfileTest to assert the My Consoles tooltip markup/classes support visible overflow or safe positioning.
Keep regression coverage for console icon order, duplicate filtering, and text fallback.
Include a long-name or single-console case if the implementation changes tooltip layout.
Run the focused UserProfileTest coverage before closing the issue.
Run vendor/bin/pint --dirty --format agent before implementation closeout if PHP files change.

Progress Checklist

Inspect the current profile console grid and tooltip containers
Adjust tooltip positioning or overflow so bottom-row labels are readable
Preserve hover and focus behavior
Preserve console icon order and text fallback behavior
Add focused profile tooltip regression coverage
Run focused UserProfileTest coverage
Run vendor/bin/pint --dirty --format agent if PHP files changed
Move the issue out of Codex review once verification is complete

The profile My Consoles section should show readable platform labels when users hover or focus console icons, including bottom-row and single-console layouts. A Discord report noted that labels on the dev site can be cut off, making it hard to tell which platform an icon represents. The profile page should keep the compact icon grid while allowing tooltip text to remain visible. ## Scope - Public profile My Consoles section. - Console icon tooltip positioning and clipping behavior. - Hover and keyboard-focus tooltip visibility. - Long platform names in the console grid. - Existing icon order, text fallback, and light/dark styling. ## Acceptance Criteria - Console tooltip labels are fully readable when the console is in the bottom row. - Console tooltip labels are fully readable when the user has only one console. - Tooltip text remains available on hover and keyboard focus. - The containing profile card does not clip the visible tooltip. - Existing console icon order and duplicate filtering stay unchanged. - Platforms without icons still render the existing text fallback. - The fix works in light and dark mode without disrupting the profile layout. ## Test Coverage Required - Extend UserProfileTest to assert the My Consoles tooltip markup/classes support visible overflow or safe positioning. - Keep regression coverage for console icon order, duplicate filtering, and text fallback. - Include a long-name or single-console case if the implementation changes tooltip layout. - Run the focused UserProfileTest coverage before closing the issue. - Run vendor/bin/pint --dirty --format agent before implementation closeout if PHP files change. ## Progress Checklist - [x] Inspect the current profile console grid and tooltip containers - [x] Adjust tooltip positioning or overflow so bottom-row labels are readable - [x] Preserve hover and focus behavior - [x] Preserve console icon order and text fallback behavior - [x] Add focused profile tooltip regression coverage - [x] Run focused UserProfileTest coverage - [x] Run vendor/bin/pint --dirty --format agent if PHP files changed - [x] Move the issue out of Codex review once verification is complete

Veilor added the

status

needs codex review

label

2026-06-19 14:13:30 -05:00

Codex changed title from ~~The bottom row names for "My Consoles" get cut off~~ to Fix My Consoles Tooltip Clipping on Profile Pages

2026-06-19 14:43:32 -05:00

Codex added

component: user consoles

component: user profiles

component: web design

and removed

labels

2026-06-19 14:46:46 -05:00

jimmyb added this to the Laravel 13 + TailwindCSS project

2026-06-19 14:48:46 -05:00

Codex self-assigned this

2026-06-19 14:52:06 -05:00

Codex added

and removed

labels

2026-06-19 14:52:06 -05:00

Codex commented

2026-06-19 16:29:01 -05:00

Member

Notes

Updated the public profile My Consoles section so the card, body, and icon grid allow visible overflow.
Repositioned console icon tooltips above the icons with bottom-full/mb-2, preserving the existing compact grid and hover/focus reveal behavior.
Left console ordering, duplicate filtering, icon URLs, and the no-icon text fallback unchanged.
Added focused UserProfileTest coverage for visible overflow, upward tooltip positioning, hover/focus classes, the long-label case, duplicate filtering, ordering, and text fallback.

Verification

User confirmed the tooltip clipping is fixed.
php artisan test --compact tests/Feature/UserProfileTest.php passed: 23 tests, 165 assertions.
vendor/bin/pint tests/Feature/UserProfileTest.php --format agent passed.

## Notes - Updated the public profile My Consoles section so the card, body, and icon grid allow visible overflow. - Repositioned console icon tooltips above the icons with `bottom-full`/`mb-2`, preserving the existing compact grid and hover/focus reveal behavior. - Left console ordering, duplicate filtering, icon URLs, and the no-icon text fallback unchanged. - Added focused `UserProfileTest` coverage for visible overflow, upward tooltip positioning, hover/focus classes, the long-label case, duplicate filtering, ordering, and text fallback. ## Verification - User confirmed the tooltip clipping is fixed. - `php artisan test --compact tests/Feature/UserProfileTest.php` passed: 23 tests, 165 assertions. - `vendor/bin/pint tests/Feature/UserProfileTest.php --format agent` passed.

Codex

2026-06-19 16:30:50 -05:00