Skip to content

Fix spacing in reactions menu header and media gallery preview icons#6351

Open
gpunto wants to merge 4 commits intov7from
fix-spacing
Open

Fix spacing in reactions menu header and media gallery preview icons#6351
gpunto wants to merge 4 commits intov7from
fix-spacing

Conversation

@gpunto
Copy link
Copy Markdown
Contributor

@gpunto gpunto commented Apr 9, 2026

Goal

Fix spacing and sizing inconsistencies in the reactions menu header and media gallery preview footer.

Implementation

  • Fix padding in the reactions menu header
  • Update icon size on the media gallery preview footer icons

🎨 UI Changes

Please check the updated snapshots

Testing

  1. Long-press a message → verify the reaction pills in the menu header are spaced according to figma design
  2. Open the media gallery preview → verify the share and photos footer icons are consistently sized

Summary by CodeRabbit

  • Style
    • Adjusted icon sizing in the media gallery preview screen for improved visual consistency.
    • Refined message menu header layout with optimized spacing between reaction options.
    • Enhanced the "show more reactions" button interactivity with improved touch target sizing.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026

PR checklist ✅

All required conditions are satisfied:

  • Title length is OK (or ignored by label).
  • At least one pr: label exists.
  • Sections ### Goal, ### Implementation, and ### Testing are filled.

🎉 Great job! This PR is ready for review.

@gpunto gpunto added the pr:improvement Improvement label Apr 9, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 9, 2026

SDK Size Comparison 📏

SDK Before After Difference Status
stream-chat-android-client 5.25 MB 5.82 MB 0.57 MB 🔴
stream-chat-android-ui-components 10.60 MB 10.96 MB 0.36 MB 🟡
stream-chat-android-compose 12.81 MB 12.25 MB -0.56 MB 🚀

@gpunto gpunto marked this pull request as ready for review April 10, 2026 10:09
@gpunto gpunto requested a review from a team as a code owner April 10, 2026 10:09
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 10, 2026

Walkthrough

Updates to UI component icon sizing and layout spacing in the message menu header composable, along with a replacement of an internal lambda getter in compiled API declarations.

Changes

Cohort / File(s) Summary
API Declarations
api/stream-chat-android-compose.api
Lambda getter getLambda$789360109$stream_chat_android_compose_release() replaced with getLambda$1595289781$stream_chat_android_compose_release() in ComposableSingletons$MessageMenuHeaderKt.
Icon Sizing
src/main/java/io/getstream/chat/android/compose/ui/attachments/preview/MediaGalleryPreviewScreen.kt
Share/cancel icon resized from 24.dp to 20.dp; explicit size(20.dp) modifier added to photos/gallery icon.
Layout & Spacing
src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/MessageMenuHeader.kt
Removed horizontalArrangement spacing and container padding; added per-reaction padding(start = StreamTokens.spacing3xs) to ReactionToggle items; added minimumInteractiveComponentSize() to "show more reactions" button; updated preview theme from ChatTheme to ChatPreviewTheme.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Poem

🐰 Sizing down those icons neat,
Spacing tweaks to make things sweet,
Buttons now stand tall and proud,
Preview themes dressed in a shroud,
Layout harmony, our victory complete!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 50.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately summarizes the two main changes in the PR: fixing spacing in the reactions menu header and updating icon sizing in the media gallery preview.
Description check ✅ Passed The description covers the Goal and Implementation sections, provides UI changes context, and includes testing steps. However, it lacks the contributor/reviewer checklists and doesn't include comparison screenshots or videos as specified in the template.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix-spacing

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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/MessageMenuHeader.kt (1)

94-99: ⚠️ Potential issue | 🟡 Minor

Add explicit spacing before the “show more reactions” button.

ReactionToggle items get start padding, but the trailing StreamButton has no sibling gap, so the last reaction and plus button can appear visually cramped.

💡 Suggested fix
         if (options.size < resolver.supportedReactions.size) {
             StreamButton(
                 onClick = onShowMoreReactionsSelected,
                 style = StreamButtonStyleDefaults.secondaryOutline,
                 size = StreamButtonSize.Small,
-                modifier = Modifier.minimumInteractiveComponentSize(),
+                modifier = Modifier
+                    .padding(start = StreamTokens.spacing3xs)
+                    .minimumInteractiveComponentSize(),
             ) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/MessageMenuHeader.kt`
around lines 94 - 99, In MessageMenuHeader, add explicit start spacing before
the trailing StreamButton (the one with onShowMoreReactionsSelected and
StreamButtonStyleDefaults.secondaryOutline) so it doesn't sit flush against the
last ReactionToggle; update the StreamButton's modifier (or wrap it) to include
a start padding/gap consistent with ReactionToggle's start padding (e.g., use
Modifier.padding(start = <sameDp>) or Modifier.widthSpacer equivalent) to
visually separate the last reaction and the "show more reactions" button.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In
`@stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/MessageMenuHeader.kt`:
- Around line 94-99: In MessageMenuHeader, add explicit start spacing before the
trailing StreamButton (the one with onShowMoreReactionsSelected and
StreamButtonStyleDefaults.secondaryOutline) so it doesn't sit flush against the
last ReactionToggle; update the StreamButton's modifier (or wrap it) to include
a start padding/gap consistent with ReactionToggle's start padding (e.g., use
Modifier.padding(start = <sameDp>) or Modifier.widthSpacer equivalent) to
visually separate the last reaction and the "show more reactions" button.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 408baed6-9f2d-43d0-bd8a-5caa86aa6a9b

📥 Commits

Reviewing files that changed from the base of the PR and between 1f1b9c1 and a948760.

⛔ Files ignored due to path filters (10)
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.preview_MediaGalleryPreviewScreenTest_media_gallery_footer_connected.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.preview_MediaGalleryPreviewScreenTest_media_gallery_footer_offline.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.preview_MediaGalleryPreviewScreenTest_media_gallery_footer_sharing_in_progress.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.preview_MediaGalleryPreviewScreenTest_media_gallery_screen_connected.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.preview_MediaGalleryPreviewScreenTest_media_gallery_screen_offline.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.attachments.preview_MediaGalleryPreviewScreenTest_media_gallery_screen_with_share_large_file_prompt.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channel.attachments_ChannelMediaAttachmentsPreviewContentTest_content.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channel.attachments_ChannelMediaAttachmentsPreviewContentTest_content_in_dark_mode.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channel.attachments_ChannelMediaAttachmentsPreviewContentTest_preparing_to_share_content.png is excluded by !**/*.png
  • stream-chat-android-compose/src/test/snapshots/images/io.getstream.chat.android.compose.ui.channel.attachments_ChannelMediaAttachmentsPreviewContentTest_preparing_to_share_content_in_dark_mode.png is excluded by !**/*.png
📒 Files selected for processing (3)
  • stream-chat-android-compose/api/stream-chat-android-compose.api
  • stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/attachments/preview/MediaGalleryPreviewScreen.kt
  • stream-chat-android-compose/src/main/java/io/getstream/chat/android/compose/ui/components/selectedmessage/MessageMenuHeader.kt

@sonarqubecloud
Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pr:improvement Improvement

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant