fix: Admin Panel content hidden behind bottom navigation bar

[Rohit3523]

Proposed changes

The Admin Panel is rendered as an embedded web view. On devices with a bottom system bar (Android navigation bar / iOS home indicator), the bottom of the admin settings content is hidden behind it, since SafeAreaView on this screen only insets the left/right edges.

This PR adds a bottom padding to the WebView container based on the safe-area inset (Math.max(insets.bottom, 24)), so the admin content clears the bottom navigation area on any device.

Issue(s)

NATIVE-1447

How to test or reproduce

1. Log in to a workspace as a user with admin permissions.
2. Open the sidebar → Admin Panel.
3. Scroll to the bottom of any admin settings page (e.g. General / Workspace settings).
4. Verify the last rows / save button are fully visible above the bottom navigation bar and nothing is cut off behind it.

Screenshots

OS	Before	After
Android
iOS

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

• Bug Fixes
  • Improved the admin panel’s layout on devices with bottom safe areas, preventing content from being obscured and ensuring adequate bottom spacing.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d4283e96-af6f-49fb-87c1-ef67faf3d528

📥 Commits

Reviewing files that changed from the base of the PR and between 091775e and 78d4d89.

📒 Files selected for processing (1)

• app/views/AdminPanelView/index.tsx

📜 Recent review details

⏰ Context from checks skipped due to timeout. (2)

• GitHub Check: E2E Build Android / android-build
• GitHub Check: Build Android / Build

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{js,ts,jsx,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{js,ts,jsx,tsx}: Use descriptive names for functions, variables, and classes that clearly convey their purpose
Write comments that explain the 'why' behind code decisions, not the 'what'
Keep functions small and focused on a single responsibility
Use const by default, let when reassignment is needed, and avoid var
Prefer async/await over .then() chains for handling asynchronous operations
Use explicit error handling with try/catch blocks for async operations
Avoid deeply nested code; refactor complex logic into helper functions

Files:

• app/views/AdminPanelView/index.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

**/*.{ts,tsx}: Use TypeScript for type safety; add explicit type annotations to function parameters and return types
Prefer interfaces over type aliases for defining object shapes in TypeScript
Use enums for sets of related constants rather than magic strings or numbers

Files:

• app/views/AdminPanelView/index.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{js,jsx,ts,tsx}: Before committing changes to JavaScript or TypeScript files, run pnpm prettier-lint and TZ=UTC pnpm test for the modified files.
Use the local-first data flow: the UI reads from WatermelonDB, while sagas synchronize data with the server.
Use Redux and Redux-Saga for global or server state, and use Zustand for feature-local stores; do not assume all state is in Redux.

Files:

• app/views/AdminPanelView/index.tsx

🧠 Learnings (3)

📚 Learning: 2026-04-30T17:07:51.020Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7274
File: app/lib/services/voip/MediaCallEvents.ts:0-0
Timestamp: 2026-04-30T17:07:51.020Z
Learning: In this Rocket.Chat React Native codebase, the ESLint rule `no-void: error` is enforced. When you see a promise returned from an async call that is not awaited (a “floating promise”), do not silence it with the `void somePromise()` pattern. Instead, handle the promise explicitly by attaching `.catch(...)` (or otherwise awaiting/handling the error) so unhandled-rejection risks are addressed in a way that satisfies the existing ESLint configuration.

Applied to files:

• app/views/AdminPanelView/index.tsx

📚 Learning: 2026-06-24T22:58:43.390Z

Learnt from: Rohit3523
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7157
File: app/views/MessagesView/index.tsx:392-392
Timestamp: 2026-06-24T22:58:43.390Z
Learning: When wrapping a React Native component (e.g., via `withSafeAreaInsets`) ensure `hoistNonReactStatics` is only required if the wrapped component actually defines static properties/methods that consumers rely on. If the component has no statics (as in `app/views/MessagesView/index.tsx`), you can omit `hoistNonReactStatics` for this case.

Applied to files:

• app/views/AdminPanelView/index.tsx

📚 Learning: 2026-06-25T18:37:44.793Z

Learnt from: diegolmello
Repo: RocketChat/Rocket.Chat.ReactNative PR: 7434
File: app/views/ScreenLockConfigView.tsx:101-141
Timestamp: 2026-06-25T18:37:44.793Z
Learning: In the Rocket.Chat React Native codebase, do not treat passing an `async` function directly to an event prop in React/React Native UI components (e.g., `onPress={async () => ...}` in TSX) as a “floating promises” CI-blocking lint issue—this repo does not enable the ESLint `no-floating-promises` rule (while `no-void` is enforced). Only raise robustness follow-ups when there are genuinely unhandled promise paths (e.g., fire-and-forget calls like `save()` that return a Promise that is neither awaited nor handled), and prefer making sure failure paths are explicitly handled/reported rather than blocking on lint-style floating-promise concerns.

Applied to files:

• app/views/AdminPanelView/index.tsx

🔇 Additional comments (2)

app/views/AdminPanelView/index.tsx (2)

5-5: LGTM!

Also applies to: 21-21, 43-43

---

5-5: 📐 Maintainability & Code Quality

Run the required validation commands before commit.

Run pnpm prettier-lint and TZ=UTC pnpm test for the modified TypeScript files.

As per coding guidelines, JavaScript and TypeScript changes require these checks before committing.

Also applies to: 21-21, 43-43

Source: Coding guidelines

---

Walkthrough

AdminPanelView now reads the device safe-area inset and applies bottom padding to its WebView container. The padding is at least 24 pixels.

Changes

Admin panel layout

Layer / File(s)	Summary
Apply safe-area bottom padding app/views/AdminPanelView/index.tsx	AdminPanelView reads safe-area insets and applies the larger of the bottom inset and 24 pixels to the WebView container.

Estimated code review effort: 1 (Trivial) | ~2 minutes

Possibly related PRs

• RocketChat/Rocket.Chat.ReactNative#7157: Both changes adjust safe-area bottom padding for view containers.

Suggested labels: type: bug

Suggested reviewers: diegolmello

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the fix for Admin Panel content hidden by the bottom navigation bar.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• NATIVE-1447: 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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Android Build Available

Rocket.Chat 4.75.0.109482

Internal App Sharing: https://play.google.com/apps/test/RQQ8k09hlnQ/ahAO29uNTAQFbyG5IHqoemCCAv9Yz6Xw53Tlo_HIiKMQAoafpPLrtADaWA8WRZHpDecE6_JLcr1Bpo4ymsm4NJebF1

[github-actions]

iOS Build Available

Rocket.Chat 4.75.0.109483