Skip to content

fix: ActionSheet cuts off the bottom content#7326

Open
OtavioStasiak wants to merge 8 commits into
developfrom
fix.action-sheet-bottom-low-height-devices
Open

fix: ActionSheet cuts off the bottom content#7326
OtavioStasiak wants to merge 8 commits into
developfrom
fix.action-sheet-bottom-low-height-devices

Conversation

@OtavioStasiak
Copy link
Copy Markdown
Contributor

@OtavioStasiak OtavioStasiak commented May 15, 2026

Proposed changes

Fixes a bottom-clipping regression in action sheets that render arbitrary children (not the predefined options list) on devices without a home-indicator safe-area inset — most visibly iPhone SE, where the Add Server button in the Workspaces sheet was cut off.

Issue(s)

https://rocketchat.atlassian.net/browse/SUP-1040

How to test or reproduce

  • Boot the iPhone SE (3rd generation) simulator (or any device ≤ 667px tall with no home indicator).
  • Log in to any workspace.
  • On the Rooms List, tap the server name in the header → the Workspaces action sheet opens.
  • Repeat it with two and three workspaces;
  • Click on add Workspace;
  • On NewServerView check the ServersHistory;

Screenshots

Servers List

Before After
Simulator Screenshot - iPhone SE (3rd generation) - 2026-05-15 at 11 15 40 Simulator Screenshot - iPhone SE (3rd generation) - 2026-05-15 at 11 47 59

Servers History

Before After
Simulator Screenshot - iPhone SE (3rd generation) - 2026-05-15 at 11 15 50 Simulator Screenshot - iPhone SE (3rd generation) - 2026-05-15 at 11 47 41

Types of changes

  • Bugfix (non-breaking change which fixes an issue)
  • Improvement (non-breaking change which improves a current function)
  • New feature (non-breaking change which adds functionality)
  • Documentation update (if none of the other choices apply)

Checklist

  • I have read the CONTRIBUTING doc
  • I have signed the CLA
  • Lint and unit tests pass locally with my changes
  • I have added tests that prove my fix is effective or that my feature works (if applicable)
  • I have added necessary documentation (if applicable)
  • Any dependent changes have been merged and published in downstream modules

Further comments

Summary by CodeRabbit

  • Tests

    • Added small-screen regression tests for servers history and servers list functionality to ensure proper UI rendering on compact devices.
  • Bug Fixes

    • Improved logout flow to ensure the logout button is accessible on all screen sizes.
    • Enhanced action sheet layout calculations for better display on small screens.
  • Chores

    • Updated test configuration parameters.

Review Change Stack

@OtavioStasiak OtavioStasiak temporarily deployed to approve_e2e_testing May 15, 2026 14:55 — with GitHub Actions Inactive
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 15, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 77984a01-8a6d-4b2d-9572-06ddd5573bc2

📥 Commits

Reviewing files that changed from the base of the PR and between 3d57481 and f21755a.

📒 Files selected for processing (4)
  • .maestro/helpers/logout.yaml
  • .maestro/tests/onboarding/servers-history-small-screen.yaml
  • .maestro/tests/room/reaction-picker-small-screen.yaml
  • .maestro/tests/room/servers-list-small-screen.yaml
✅ Files skipped from review due to trivial changes (1)
  • .maestro/tests/room/reaction-picker-small-screen.yaml
📜 Recent review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: E2E Build iOS / ios-build
  • GitHub Check: E2E Build Android / android-build
  • GitHub Check: ESLint and Test / run-eslint-and-test
🧰 Additional context used
🧠 Learnings (2)
📚 Learning: 2026-03-05T14:28:10.004Z
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6997
File: .maestro/tests/room/message-markdown-click.yaml:28-39
Timestamp: 2026-03-05T14:28:10.004Z
Learning: In Maestro YAML selector fields (text, id) within the Rocket.Chat React Native repository, use the contains pattern '.*keyword.*' (leading and trailing '.*') for matching text. The pattern '.*keyword*.' is incorrect and will fail to match cases where the keyword appears at the end of the element's text. This guideline applies to all Maestro YAML selector fields across the codebase.

Applied to files:

  • .maestro/tests/room/servers-list-small-screen.yaml
  • .maestro/tests/onboarding/servers-history-small-screen.yaml
📚 Learning: 2026-03-17T19:15:26.536Z
Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 6970
File: .maestro/tests/room/share-message.yaml:77-79
Timestamp: 2026-03-17T19:15:26.536Z
Learning: In YAML test files under .maestro/tests/room, use tapping the empty area (e.g., tapOn: point: 5%,10%) to dismiss both the bottom sheet and keyboard when needed. Do not rely on action-sheet-handle alone if the keyboard also needs to be dismissed in the same step. This pattern is acceptable for tests where a single tap should close both UI elements.

Applied to files:

  • .maestro/tests/room/servers-list-small-screen.yaml
🔇 Additional comments (3)
.maestro/helpers/logout.yaml (1)

40-43: LGTM!

.maestro/tests/onboarding/servers-history-small-screen.yaml (1)

1-45: LGTM!

.maestro/tests/room/servers-list-small-screen.yaml (1)

1-48: LGTM!


Walkthrough

This PR fixes ActionSheet detent calculation to include handle height, improves logout helper robustness for small screens, adds comprehensive small-screen regression tests for Servers History and Servers List views, and parameterizes a test configuration to support multi-platform execution.

Changes

Small-Screen UI Testing and ActionSheet Rendering

Layer / File(s) Summary
ActionSheet detent calculation with handle height
app/containers/ActionSheet/useActionSheetDetents.ts, app/containers/ActionSheet/useActionSheetDetents.test.tsx
useActionSheetDetents now includes HANDLE_HEIGHT in the content-based detent formula numerator, and the test expectation is updated to validate (contentHeight + bottomInset + HANDLE_HEIGHT) / windowHeight.
Logout helper robustness
.maestro/helpers/logout.yaml
The logout helper adds a scrollUntilVisible step to scroll downward and ensure the settings-logout element is visible before tapping it, improving reliability on small screens.
Small-screen regression tests
.maestro/tests/onboarding/servers-history-small-screen.yaml, .maestro/tests/room/servers-list-small-screen.yaml, .maestro/tests/room/reaction-picker-small-screen.yaml
New Maestro test for Servers History validates action sheet rendering on small screens by waiting, opening, asserting, and tapping the history item; Servers List test validates the servers list button and Add Server action sheet behavior on small screens, specifically testing for clipping regressions on iPhone SE; Reaction Picker test is parameterized to use ${APP_ID} instead of a hard-coded app identifier for multi-platform execution.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • diegolmello
🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main fix in the PR: resolving an ActionSheet content clipping issue on small-screen devices, which is the central change across multiple test files and the useActionSheetDetents logic modification.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)
  • SUP-1040: Request failed with status code 401

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.

@OtavioStasiak OtavioStasiak marked this pull request as ready for review May 15, 2026 14:58
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_ios_build May 15, 2026 14:58 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to official_android_build May 15, 2026 14:58 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_android_build May 15, 2026 14:58 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak changed the title Fix.action sheet bottom low height devices fix: ActionSheet cutting off the bottom of content May 15, 2026
@OtavioStasiak OtavioStasiak changed the title fix: ActionSheet cutting off the bottom of content ix: ActionSheet cuts off the bottom content May 15, 2026
@OtavioStasiak OtavioStasiak changed the title ix: ActionSheet cuts off the bottom content fix: ActionSheet cuts off the bottom content May 15, 2026
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_android_build May 15, 2026 16:58 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to official_android_build May 15, 2026 16:58 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_ios_build May 15, 2026 16:58 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak temporarily deployed to approve_e2e_testing May 18, 2026 19:57 — with GitHub Actions Inactive
@OtavioStasiak OtavioStasiak had a problem deploying to official_android_build May 18, 2026 20:01 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_ios_build May 18, 2026 20:01 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_android_build May 18, 2026 20:01 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to official_android_build May 19, 2026 13:23 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_ios_build May 19, 2026 13:23 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_android_build May 19, 2026 13:23 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_ios_build May 20, 2026 16:13 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to official_android_build May 20, 2026 16:13 — with GitHub Actions Error
@OtavioStasiak OtavioStasiak had a problem deploying to experimental_android_build May 20, 2026 16:13 — with GitHub Actions Error
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants