feat(ui): give the spotlight participants bar scroll buttons

[renefloor]

Why

On desktop the participants bar in CallParticipantsSpotlightView was unreachable past its first screenful:

• MaterialScrollBehavior.dragDevices excludes PointerDeviceKind.mouse, so it cannot be dragged with a mouse.
• A vertical wheel does not move a horizontal list — Scrollable takes scrollDelta.dx for a horizontal axis.
• MaterialScrollBehavior.buildScrollbar returns the child unchanged for Axis.horizontal, so there is no scrollbar either.

With 10 participants in a 1280-wide window on speakerTop, the 222×125 tiles run to 2288px and about five of the ten sit off screen with nothing indicating they exist. #1361 fixing the tile size is what turned that from rare into routine above roughly six people.

What

A floating button at either end of the participants bar, appearing while there is something further that way. A tap brings the tile cut off at that end to the other end, as far in as the list's padding, so no tile stays half hidden under a button. Works on all four ParticipantsBarAlignment values — left/right chevrons for a horizontal bar, up/down for a vertical one, swapped under RTL.

The grid's page chevrons become the same button, since the grid frames draw the same component. Both layouts share ParticipantsNavigationButton, and the grid's old 48×48 square PageNavigationButton is gone.

Design

Both Figma frames (627-13954, 627-13942) are Core / Floating Button Wrapper: a 40×40 circle on core/background/core/elevation-1 with shadow/web/light/elevation-2 and a 16px icon, inset 12px (spacing.sm) from each end of the bar.

That did not match the grid's old PageNavigationButton (48×48, radius 8, barsBg, no shadow), so the grid was brought onto the same component rather than the bar growing a second one.

Where the button sits is per-layout, and each number is measured off a frame:

Layout	Frame	Placement
Participants bar	627-13942	Over the bar, 12 (spacing.sm) in from each end
Grid, small	462-58887	Over the grid, 16 in from the view — the grid's 8 of padding and 8 more
Grid, medium and up	495-10082	Beside the grid: 8 padding, the 40 button, 8, then the tiles

A narrow grid keeps its full width because it has none to spare; above StreamScreenSize.small (768, matching the frames) the tiles are set in between the buttons instead. A hidden button holds its place either way, so the grid is the same size on every page.

Each of those insets is to the button's visual, which sits inside a wider tap target, so the layouts take participantsNavigationButtonTapInset off their own inset to place it.

The frames wrap Core / Web / Button, but stream_core_flutter has no web/mobile split — Core / Mobile / Button carries the same "min-width and min-height are enforced via hit-target variables" note, which in Flutter is StreamButton's default tapTargetSize: .padded. So the button is StreamButton.icon(style: .secondary, type: .ghost, isFloating: true) with iconSize: 16, keeping the 48px hit target around the 40px visual, and the 12px inset is measured to the visual.

Notes for review

• Button visibility comes from one ValueNotifier fed by a ScrollMetricsNotification listener (layout changes: the first layout, a participant joining, the view resizing) and a ScrollNotification listener (scrolling).
• ParticipantsNavigationButton takes visible and hides itself: AnimatedScale 0/1, which also drops it out of the hit test since a zero transform is not invertible, plus ExcludeSemantics, because a zero-scale button is otherwise still read out.
• Every layout is right-to-left safe. The small grid insets each chevron by its own side's padding, and CallParticipantsGridView.padding is now EdgeInsetsGeometry so it accepts directional insets.
• Goldens are regenerated (update_goldens): spotlight_small changed, spotlight_bar_buttons is new (a horizontal and a vertical overflowing bar), and grid_paged is new (a narrow window and a wider one, since every existing grid golden fits on one page). Both runs rewrote only those files, so neither layout moves wherever the buttons are not shown.
• Icons render as empty boxes in this package's goldens. That is pre-existing and not this change: no icon font loads under flutter test, verified by snapshotting chevronRight, chevronDown, moreHorizontal and Flutter's own Icons.chevron_right together — all four come out as tofu.
• The buttons name themselves for a screen reader and on hover, via new participantsPrevious / participantsNext localizations in English and Dutch — layout-neutral, since the grid pages rather than scrolls. StreamButton.icon's tooltip puts the string on the semantics node, the way Flutter's own IconButton does.

Testing

New cases in call_participants_spotlight_view_test.dart: all four alignments, both ends, landing on a tile edge each way, hidden while the tiles fit, reacting to a participant joining or the window growing, clamping at the end, geometry horizontal, vertical and RTL, a tap passing through a hidden button, and that each label lands on the right button's semantics.

New cases in call_participants_grid_view_test.dart: the labels, which chevrons show on the first and last page, going back, a hidden chevron not being read out, RTL paging and uneven RTL padding, the grid keeping its size across pages, and the 16 and the 8/40/8 off the frames above.

CI=true flutter test test/src/call_participants/ passes all 274.

🤖 Generated with Claude Code

[coderabbitai]

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

• Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[codecov]

Codecov Report

❌ Patch coverage is 98.80952% with 2 lines in your changes missing coverage. Please review.
⚠️ Please upload report for BASE (v2@002747a). Learn more about missing BASE report.

Files with missing lines	Patch %	Lines
...zations/stream_video_flutter_localizations_nl.dart	0.00%	2 Missing ⚠️

Additional details and impacted files

@@          Coverage Diff          @@
##             v2    #1368   +/-   ##
=====================================
  Coverage      ?   38.15%           
=====================================
  Files         ?      396           
  Lines         ?    30265           
  Branches      ?        0           
=====================================
  Hits          ?    11548           
  Misses        ?    18717           
  Partials      ?        0           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.