Change sample time line to vertical layout

[pengbins]

Description

This PR try to imporve the readability of sample timeline in filereader demo. The horizontal layout for displaying Decoding and Composition mapping was too compact and difficult to interpret. The changes introduce a vertical layout and add hover highlighting to clearly visualize the correspondence between Decoding and Composition sample mappings.

Changes Made

1. Layout Restructuring

• Changed from a compact horizontal arrangement to a clear vertical stacked layout

• Improved visual separation and alignment between Decoding and Composition timelines

2. Interactive Enhancement

• Added mouse hover highlighting that visually links corresponding Decoding and Composition pair.

Benefits

✅ Enhanced Readability: Vertical layout provides more space and reduces visual clutter

✅ Better Mapping Visualization: Hover highlighting instantly shows Decoding ↔ Composition relationships

✅ Improved User Experience: Intuitive interaction helps users understand sample mappings without guesswork

✅ Maintains All Functionality: All existing features remain fully functional

Visual Comparison

• Before: Compact horizontal layout making it hard to trace mappings

• After: Clean vertical layout with hover highlighting for clear relationship visualization

• demo

[rbouqueau]

Looks better, thanks for your contribution. I'll let @DenizUgur validate the technical side and merge.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 89fb972

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR