Issue #13 - [FEATURE] Convert link list to icons-only mode when horizontal scrolling is needed

[rogelio-cmj]

Motivation

The link list component in the API reference can contain multiple links that may overflow the available horizontal space, requiring users to scroll to see all items. This creates a poor user experience as scrolling through text links is cumbersome and the overflow may not be immediately obvious. By automatically detecting when the content overflows and converting the links to icon-only mode, we can fit more items in the available space while maintaining accessibility and visual clarity.

Current Behavior

The link list component displays links with both icons and text labels in a horizontal layout. When there are many links or the viewport is narrow, the container overflows and requires horizontal scrolling to view all items. The component does not adapt to the available space, resulting in a suboptimal user experience where content may be hidden off-screen.

Reproduction Steps:

1. Navigate to an API reference page that displays a link list component (such as the license information section)
2. Add multiple links to the list or resize the browser window to a narrow width
3. Observe that the link list extends beyond the visible container width
4. Notice that horizontal scrolling is required to see all links
5. Observe that the links maintain their full text labels even when space is constrained

Expected Behavior

The link list component should intelligently detect when its content would require horizontal scrolling and automatically switch to an icon-only display mode. This allows more items to fit in the available space without scrolling. The component should dynamically respond to changes in content, viewport size, and DOM mutations to maintain optimal display.

Acceptance Criteria:

• The component detects when scrollWidth exceeds clientWidth and applies an icon-only mode
• The detection works on initial mount, window resize events, and when child elements change
• Text labels are hidden (via CSS) when icon-only mode is active, showing only the icons
• The component properly cleans up event listeners and observers when unmounted
• Unit tests verify the scrollability detection logic and class application behavior

Steps To Test

1. Mount the LinkList component with multiple link items that would cause overflow
2. Verify that when the container's scrollWidth exceeds its clientWidth, the icons-only class is applied
3. Resize the browser window and confirm the component recalculates and updates the display mode appropriately
4. Add or remove child elements dynamically and verify the component responds to these changes
5. Check that text labels are hidden when icons-only class is present
6. Run the unit tests to verify MutationObserver setup, event listener registration, and scrollability detection logic
7. Verify that no memory leaks occur by confirming observers and event listeners are properly disconnected on unmount

Submission

Download https://cap.so/ to record your screen (use Studio mode). Export as an mp4, and drag and drop into an issue comment below.

Guide to submitting pull requests: https://hackmd.io/@timothy1ee/Hky8kV3hlx