UI Breaks on `Add New API Key` Drawer with `Restricted` Permissions on Mobile

[unrenamed]

Issue Summary

When accessing the Settings > API Keys page on mobile, opening the Add new API Key drawer and selecting the Restricted permissions option causes UI issues. The Create API key button becomes unclickable, and the animated list of restricted permissions appears incomplete, as it is cut off at the bottom. This issue prevents users from completing the process of adding a new API key with restricted permissions.

Steps to Reproduce

1. Open the application on a mobile device.
2. Navigate to Settings > API Keys.
3. Click on the Create button to open the drawer.
4. Select the Restricted permissions option from the available options.
5. Try to scroll through the animated list of restricted permissions.

Expected behavior

1. The UI should display the full list of restricted permissions without being cut off at the bottom.
2. The Create API Key button should remain clickable and functional, allowing the user to proceed with adding a new API key.

Screenshots/Videos

https://github.com/user-attachments/assets/2d389a85-ca4a-4500-82e9-5b30dcc6a019

Version info

Tested on both:

1. iPhone 8+ iOS 16.7.10
2. Brave 1.71.114 Chromium: 130.0.6723.58 (Official Build) (arm64)

The video was recorded using Brave browser. The issue is the same on iOS, although looks just a bit different (the scroll does not work at all, i.e. there is no empty white space at the bottom)

[linear[bot]]

ENG-860 UI Breaks on `Add New API Key` Drawer with `Restricted` Permissions on Mobile

[steven-tey]

Good find! I have assigned the issue to you @unrenamed, feel free to PR!

[aritradevelops]

/assign

[oss-gg[bot]]

This issue is already assigned to another person. Please find more issues here.