Mobile: Fixes #15061: Fix profile list not scrollable to last item on Manage Profiles screen

[varunkumar-22]

Fixes #15061

Problem

On the Manage Profiles screen, if you have enough profiles to overflow the screen, you can't scroll all the way down ; the last item is unreachable. The root cause was a plain View wrapping the FlatList with no flex styling. That caused the list to size itself based on content rather than the available space, so React Native had no room to scroll within

On top of that, even if scrolling had worked, the floating action button sits absolutely positioned at the bottom of the screen and would have covered the last list item anyway

Fix

Removed the wrapper View and gave the FlatList flex: 1 directly, so it fills the space between the header and the bottom of the screen and becomes properly scrollable. Added paddingBottom: 80 to the contentContainerStyle so the last profile clears the FAB when scrolled to the bottom.

Testing

BEFORE:

Screen.Recording.2026-04-12.at.10.28.45.AM.mov

AFTER

fix.the.scroll.2.mp4

[coderabbitai]

📝 Walkthrough

Walkthrough

The ProfileSwitcher.tsx component is modified to fix scrollability to the bottom entry by removing an intermediate view wrapper around the FlatList, applying layout styling directly to the list, and adding 80 pixels of bottom padding via contentContainerStyle.

Changes

Cohort / File(s)	Summary
Profile List Layout Fix packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.tsx	Removed intermediate <View> wrapper around FlatList, applied flex: 1 styling directly to the list, and added 80px bottom padding (contentContainerStyle) to enable scrolling to the last profile entry.

Suggested labels

mobile, bug

Suggested reviewers

• mrjo118

🚥 Pre-merge checks | ✅ 6

✅ Passed checks (6 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing a scrolling issue on the Manage Profiles screen by making the profile list scrollable to the last item.
Description check	✅ Passed	The description clearly explains the problem, the solution implemented, and includes testing evidence (before/after videos), all directly related to the changeset.
Linked Issues check	✅ Passed	The changes directly address issue #15061 by removing the wrapper View, applying flex: 1 to the FlatList for proper scrolling, and adding bottom padding to prevent the FAB from covering the last item.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to fixing the scrolling issue in ProfileSwitcher.tsx; no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Pr Description Must Follow Guidelines	✅ Passed	The pull request description comprehensively meets all required guidelines with clear Problem, Solution, and Test Plan sections.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.tsx (1)

219-219: Replace the hard-coded bottom inset with a theme-driven style.

Line 219 uses a magic number (paddingBottom: 80). Please move this into useStyle and derive it from theme spacing so it stays consistent if layout tokens change.

♻️ Suggested refactor

@@
 			profileList: {
 				flex: 1,
 			},
+			profileListContent: {
+				paddingBottom: theme.margin * 5,
+			},
@@
-				contentContainerStyle={{ paddingBottom: 80 }}
+				contentContainerStyle={style.profileListContent}
 			/>

Based on learnings: For GUI style changes in Desktop and mobile clients, refer to packages/lib/theme.ts for all styling information.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.tsx` at line
219, Replace the hard-coded paddingBottom: 80 in the ProfileSwitcher component's
contentContainerStyle with a theme-driven value: update the component to use the
useStyle (or useTheme) hook to read the spacing token from the app theme
(packages/lib/theme.ts) and compute the bottom inset (e.g., theme.spacing.xxx or
derived inset value), then set contentContainerStyle={{ paddingBottom:
themeSpacingValue }}; make this change inside ProfileSwitcher (where
contentContainerStyle is set) and remove the magic number so layout follows the
theme tokens.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.tsx`:
- Line 219: Replace the hard-coded paddingBottom: 80 in the ProfileSwitcher
component's contentContainerStyle with a theme-driven value: update the
component to use the useStyle (or useTheme) hook to read the spacing token from
the app theme (packages/lib/theme.ts) and compute the bottom inset (e.g.,
theme.spacing.xxx or derived inset value), then set contentContainerStyle={{
paddingBottom: themeSpacingValue }}; make this change inside ProfileSwitcher
(where contentContainerStyle is set) and remove the magic number so layout
follows the theme tokens.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 269145f0-a505-483e-9ce3-2daa9e32617e

📥 Commits

Reviewing files that changed from the base of the PR and between f545726 and 117e168.

📒 Files selected for processing (1)

• packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.tsx

[mrjo118]

So the extra padding is only for clearance of the floating button, but removing the wrapping view alone fixes the actual scroll issue?

Personally I'm not sure adding clearence of the floating button is needed in this case, but I wouldn't say to remove without Laurent's opinion first, as it might be preferred to do so. The app does not currently do that for items in the note list though

[varunkumar-22]

Yes, removing the wrapper view is what fixes the scroll, the padding is just there so the last item does not slide under + button when you scroll all the way down. Without it, the item is still there and tappable on the left side, but the text gets cut off by the FAB which makes it hard to read especially if the profile name is long

I recorded a quick video showing both cases with and without the padding , so you can see the difference
Happy to drop it if that's the preferred call, but wanted to show why I added it first
I will wait for Laurent's call on this

WITHOUT PADDING:

Screen.Recording.2026-04-13.at.10.22.20.AM.mov

WITH PADDING

Screen.Recording.2026-04-13.at.10.20.31.AM.mov