feature-ui - Port "Read More" behaviour to Smart-TV

[mattsigal]

Pull Request

Summary

Implements a collapsible text container ("Read More" link) for long media descriptions (longer than 4 lines) on the Smart-TV details page, matching the visual grouping and behavior of the core client.

Related Issues

Link related issues or tickets separated by commas.

Discord feedback.

• Closes #
• Fixes #
• Related to #

Type of Change

• Bug fix
• New feature
• Refactor
• Performance improvement
• UI/UX update
• Documentation update
• Build/CI change
• Other (describe):

Changes Made

List the key changes included in this PR.

• Added React state isExpanded and canToggle to track expanded/collapsed visual state and overflow status.
• Implemented React useEffect hook to measure paragraph scrollHeight vs clientHeight when collapsed to dynamically detect text overflow (> 4 lines).
• Wrapped description block in an Enact sandstone SpottableDiv with spotlightDisabled={!canToggle} so only overflowing descriptions are focusable via D-pad remote.
• Created .descriptionContainer styles (thin border, slight background, padding) for visual grouping.
• Created .overviewCollapsed class using line-clamp (-webkit-line-clamp: 4) to truncate long descriptions.
• Added scale transitions and highlights for .descriptionContainerSpottable focus state, and styled the #ff5b5b colored "Read More" trigger button.

Platform

• Tizen (Samsung)
• webOS (LG)
• Both / Shared code

Testing

Describe how this change was tested.

• Tested on emulator
• Tested on physical device
• Manual testing completed
• Not tested (explain why):

Test Steps

1. Navigate to a media item with a short description (< 4 lines) and verify that it renders fully, has no focus states, and shows no "Read More" button.
2. Navigate to a media item with a long description (> 4 lines) and verify that it is clamped to 4 lines with a trailing ellipsis and a "Read More" button.
3. Move remote focus to the description box (showing highlight/scale transition) and press OK/Enter to fully expand it.

Screenshots (if applicable)

Include screenshots or recordings for UI changes.

2026-07-16_15-47-29_chrome.mp4

Checklist

• Code builds successfully
• Code follows project style and conventions
• No unnecessary commented-out code
• No new warnings introduced

[github-actions]

✅ Build Successful

All platform builds passed. You can download the test artifacts below.

Platform	Status	Artifact
webOS	✅ Passed	Moonfin_webOS_*.ipk
Tizen Regular	✅ Passed	Moonfin_Tizen_Regular_*.wgt
Tizen Oblong	✅ Passed	Moonfin_Tizen_Oblong_*.wgt
Tizen Legacy	✅ Passed	Moonfin_Tizen_Legacy_*.wgt

Property	Value
Commit	78252e3
Workflow run	Build #166