"Create New Key" button requires scrolling; consider making it always accessible

[unrenamed]

Preliminary Checks

• I have reviewed the documentation: https://unkey.com/docs

• I have searched for existing issues: https://github.com/unkeyed/unkey/issues

• This issue is not a question, general help request, or anything other than a bug report directly related to Unkey. Please ask questions in our Discord community: https://unkey.com/discord.

Reproduction / Replay Link (Optional)

No response

Issue Summary

The "Create New Key" button is currently positioned below the entire list of API cards, which can be extensive. When trying to create a new root key with workspace-only permissions, users need to scroll to the bottom of the page. This creates an inconvenient user experience, especially when the list of APIs is long. Ideally, the button should be sticky and always visible at the bottom of the window, regardless of the length of the API list.

Steps to Reproduce

1. Navigate to Settings > Root Keys management page and click "Create New Root Key"
2. Ensure that multiple APIs are listed, creating a long scrollable list of cards (if not, create more APIs)
3. Attempt to create a new root key with workspace-only permissions by scrolling down to the bottom of the list.
4. Observe that the "Create New Key" button is positioned after the list and requires scrolling to access it.

Expected behavior

The "Create New Key" button should be sticky at the bottom of the viewport so that users can always access it without scrolling, regardless of the length of the API list. Open to other UX approaches if the sticky solution isn't feasible.

Other information

No response

Screenshots

Screen.Recording.2024-10-14.at.15.27.17.mov

Version info

- OS:
- Node:
- npm:

[linear]

ENG-1466 "Create New Key" button requires scrolling; consider making it always accessible

[mitullakkad]

/assign

[oss-gg]

This issue is not part of oss.gg hackathon. Please pick a different one or start with a side quest

[FaheemOnHub]

i want to work on this , can i get assigned ? @unrenamed

[shanthi1710]

/assign

[oss-gg]

This issue is not part of oss.gg hackathon. Please pick a different one or start with a side quest

[im-satyam]

assign this to me i can fix it

[chronark]

Absolutely this sucks, my testing workspace has 200 APIs, imagine my pain :D

I think sticky at the bottom sounds good.
/award 150

[oss-gg]

Awarding unrenamed: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/unrenamed

[Aryant01]

/assign

[oss-gg]

You already have an open issue assigned to you here. Once that's closed or unassigned, only then we recommend you to take up more.

[Roshansuthar1105]

/assign

[oss-gg]

Assigned to @Roshansuthar1105! Please open a draft PR linking this issue within 48h ⚠️ If we can't detect a PR from you linking this issue in 48h, you'll be unassigned automatically 🕹️ Excited to have you ship this 🚀

[kartikscript]

/assign

[oss-gg]

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

[nil-frontend]

/assign

[oss-gg]

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

[Abhishekmnnit6022]

/assign

[oss-gg]

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

[NaganiRohit]

/assign

[oss-gg]

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

[nikhileshkumar21]

/assign

[oss-gg]

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

[dumbesthuman]

/assign

[oss-gg]

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

[PratikRai0101]

/assign

[oss-gg]

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