fix(ui): iPhone Duo polish: picker height, list states, full-width suggestions

[xsahil03x]

Part of FLU-823. Stacked on #3017 (FLU-820); review only the commits on top of it.

• Attachment picker on short screens: below 480pt of height (Material's compact-height class, e.g. a phone in landscape), the tabbed picker's options area is 158pt instead of 260pt. With the 72pt tabs the picker then takes the height of the landscape keyboard it replaces (230pt on iPhone Duo's outer display), instead of overflowing and squeezing the message list to nothing.
• Message list states: the default loading, empty and error states scroll instead of overflowing when the list has little room (e.g. landscape with the picker open). The empty and error states fill the space with SliverFillRemaining, so they stay centred when they fit; the error UI moves into an internal StreamMessageListErrorState, leaving the list to decide only the safe-area insets.
• Autocomplete: the composer's suggestions were anchored to the inset input, so under a side inset their background stopped at the rail while the composer ran edge to edge. The autocomplete now wraps the inset input, and StreamAutocompleteOptions keeps its options clear of the side insets. Suggestions from customAutocompleteTriggers span the full width too and handle the insets themselves (noted under Changed).
• The message list's safe-area helper now uses StreamSafeArea.

Verified on the iPhone Duo simulator (outer display, portrait and landscape): no overflow with the picker open, the empty state scrolls in the remaining space, and the suggestions span the full width with their rows clear of the rail. The semantics of the list states are unchanged apart from the scroll container.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Bug Fixes
  • Autocomplete suggestions now span the composer’s full width while staying clear of side safe-area insets.
  • Attachment pickers use less vertical space on short screens.
  • Empty, loading, and error states in message lists can scroll when space is limited, preventing content from overflowing.
  • Message-list error states display an error message and offer an option to retry loading messages.
  • Message-list layouts respect safe-area insets more consistently.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: c91ba57
• Latest commit, not reviewed: d9e226a

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 21a0f585-bb09-4aa6-8d15-1c7114a71709

📥 Commits

Reviewing files that changed from the base of the PR and between c33f86f and c91ba57.

📒 Files selected for processing (2)

• packages/stream_chat_flutter/CHANGELOG.md
• packages/stream_chat_flutter/lib/src/message_list_view/message_list_view.dart

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

📝 Walkthrough

The composer and autocomplete options now handle safe-area insets separately. The attachment picker uses a reduced height on short screens. Default message-list loading, empty, and error states now use scrollable layouts.

Changes: Constrained Layouts

Layer / File(s)	Summary
Composer and autocomplete insets packages/stream_chat_flutter/lib/src/message_input/stream_message_composer.dart, packages/stream_chat_flutter/lib/src/autocomplete/stream_autocomplete.dart, packages/stream_chat_flutter/CHANGELOG.md	The composer applies safe-area insets to its input and no-permission message. Autocomplete options use StreamSafeArea with top and bottom insets disabled. The changelog records the autocomplete layout update.
Compact attachment picker packages/stream_chat_flutter/lib/src/message_input/attachment_picker/stream_attachment_picker.dart	The tabbed picker uses a height of 158 pixels when screen height is below 480 pixels. It retains the 260-pixel height at or above that breakpoint.
Scrollable message-list states packages/stream_chat_flutter/lib/src/message_list_view/*, packages/stream_chat_flutter/CHANGELOG.md	The empty and error states use CustomScrollView and SliverFillRemaining. The skeleton uses SingleChildScrollView. The default error builder uses StreamMessageListErrorState with a channel-reload retry callback, and enabled safe areas use StreamSafeArea. The changelog records the message-list layout fixes.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Bug fix · Severity of issue fixed: Low

Suggested reviewers: renefloor

Merge Risk: ⚪ Minimal · up to c91ba

The changes shorten the picker on compact screens and let default message states scroll in limited space while preserving composer side insets. The inspected code shows no concrete user-facing regression or merge-blocking risk beyond normal checks.

Security Architecture Review

Security architecture risk: 🔵 Low · up to d2e6a

The change affects a public UI customization point, but the inspected permission checks and message-retry behavior remain in place. No security issue was verified. Custom suggestion content may need to account for side insets.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The identified change in reachability is to suggestion presentation in applications using custom autocomplete triggers; the inspected path does not add a channel capability or a new reload authority.

Trust Boundaries and Controls

• observed — The inspected composer keeps its capability decision outside the new presentation wrapper, while autocomplete receives the same effective controller and focus node.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly summarizes the main UI changes: reduced picker height, improved list states, and full-width autocomplete suggestions.
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

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 95.71429% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 79.67%. Comparing base (ebce125) to head (d9e226a).

Files with missing lines	Patch %	Lines
...r/lib/src/message_list_view/message_list_view.dart	25.00%	3 Missing ⚠️

Additional details and impacted files

@@                                             Coverage Diff                                              @@
##           sahil/flu-820-respect-asymmetric-safe-area-insets-on-iphone-duo-composer    #3021      +/-   ##
============================================================================================================
+ Coverage                                                                     79.13%   79.67%   +0.54%     
============================================================================================================
  Files                                                                           452      453       +1     
  Lines                                                                         29459    29476      +17     
============================================================================================================
+ Hits                                                                          23312    23486     +174     
+ Misses                                                                         6147     5990     -157     

☔ 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.

[renefloor]

Reviewed this layer on its own. The SliverFillRemaining(hasScrollBody: false) approach for the list states and the _insetContent extraction both look like the right shape.

Main concern: there are no test changes in this layer, despite behaviour changes in 7 lib files. Tests I'd expect:

• List states: pump StreamMessageListEmptyState, StreamMessageListErrorState and StreamMessageListSkeletonLoading in a ~120pt-tall box; expect no exception and a Scrollable. On revert these fail with a RenderFlex overflow.
• Error state retry: tap "Try again" and verify reloadChannel is called.
• Autocomplete width: composer with a side inset, type /; the options card spans the full width and an option tile stays clear of the inset. Same with a custom trigger.
• No-permission message: with a side and bottom inset, the message stays clear of both.
• Picker height: StreamTabbedAttachmentPicker at heights 479 and 480 → 158 and 260, selecting every tab, with expect(tester.takeException(), isNull). That would have caught the overflow below.

[renefloor]

I think 158 is too short for every tab except the gallery. The file, camera, video and poll tabs wrap their content in OptionDrawer, which defaults to vertical: spacing.xxxl (40) margins, which leaves 78pt. Their column is a 32 icon + 8 gap + ~20 text + 16 gap + 40 button ≈ 116pt, and it doesn't scroll.

So on a phone in landscape, switching to Files/Camera/Video/Poll should still hit a ~38px RenderFlex overflow, which is the overflow this PR is fixing. Only the gallery tab (margin: .zero) fits. I worked this out from the code and haven't run it, so it's worth checking on the simulator with each tab. Fix: either reduce the OptionDrawer vertical margin at compact height, or make the drawer content scrollable.

[xsahil03x]

Confirmed: on the iPhone Duo in landscape the file, camera, video and poll tabs overflowed by 45px at 158. Fixed in d9e226a by giving those four tabs only the side margin. Their prompt is wrapped in a Center, so the 40pt top and bottom margin never moved it; it only took away the room it needed. The regular 260 layout is unchanged, and OptionDrawer's default margin is untouched, so custom drawers don't move. The new stream_tabbed_attachment_picker_height_test.dart covers every tab at 479 and 480 tall and fails on the old margin.

[renefloor]

Moving the inset into fieldViewBuilder means a customer's customAutocompleteTriggers overlay now runs under the notch/rail instead of being clipped to the inset width. It's in the changelog, which is good, but under CLAUDE.md's rules it's a behavioural break (no compile error, rendering changes), so I think it needs a ! in the title and a migration hint, e.g. "wrap custom options in SafeArea(top: false, bottom: false)".

[xsahil03x]

Intentional. The suggestions area now matches the composer and app bar: the background runs under the side insets, and our own StreamAutocompleteOptions keeps its rows clear of them. Customer content is laid out as built rather than wrapped, the same as the paged-list states in #3017. It's documented under 🔄 Changed with the one-line migration (a552d1d). I'm not marking it !: it's layout-only and affects only fully custom options views, like the composer border change. a5f716e adds tests for both the command and custom-trigger suggestions under the insets.

[renefloor]

StreamAutocompleteOptions is exported, and it now always adds side padding, which changes any custom overlay built on it. This isn't in the changelog; could it get its own 🔄 Changed line?

[xsahil03x]

Added in a552d1d: the 🔄 Changed line now names StreamAutocompleteOptions and how other options views clear the insets. a5f716e checks its content stays clear of them.

[renefloor]

nit: this isn't exported (consistent with the empty/skeleton states), but the Stream prefix and "Creates a new instance" dartdoc make it look like public API. If customers are meant to reuse it in builders.error, export it and add a changelog Added line; otherwise, fine as is.

[xsahil03x]

Leaving it internal for now. It matches StreamMessageListEmptyState and StreamMessageListSkeletonLoading, which have the same prefix and doc style and aren't exported either. Exporting the three would be new public API, so I'd do that as its own feat when there's a use for them in builders.