dashboard: Key Details UI needs two optimizations for mobile - Githubissues

unkeyed / unkey

Open source API management platform

https://go.unkey.com

Other

2.76k stars 278 forks source link

dashboard: Key Details UI needs two optimizations for mobile #1989

Closed guilhermerodz closed 2 weeks ago

guilhermerodz commented 1 month ago

Preliminary Checks

[X] I have reviewed the documentation: https://unkey.com/docs
[X] I have searched for existing issues: https://github.com/unkeyed/unkey/issues
[X] 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

CleanShot 2024-07-29 at 08 01 57@2x

CleanShot 2024-07-29 at 08 01 39@2x

Steps to Reproduce

Go to APIs > Keys then select a key and go into its details page.
You'll see overflowing elements on both key settings and key permissions pages.

Expected behavior

There should be no overflowing elements in X axis for that screen.

Other information

No response

Screenshots

No response

Version info

- OS:
- Node:
- npm:

linear[bot] commented 1 month ago

ENG-1288 dashboard: Key Details UI needs two optimizations for mobile

harshsbhat commented 1 month ago

I would like to work on this one

sreeharsha-rav commented 2 weeks ago

.take

chronark commented 2 weeks ago

go for it

sreeharsha-rav commented 2 weeks ago

I went through the code and implemented 2 changes:

Truncate the text so that you don't see overflow
Dynamic grid according to screen sizes

https://github.com/user-attachments/assets/4a2778f5-45c6-45a1-88cf-b3f991d24b22

What do you think?