fix(#1989): Optimize Key Details UI for mobile

[sreeharsha-rav]

What does this PR do?

This PR optimizes the Key Details UI for mobile devices by refactoring the Metric component to prevent text overflow and implementing a responsive grid layout in the parent component. These changes improve the readability and usability of the Key Details section on smaller screens.

Fixes #1989

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Enhancement (small improvements)

How should this be tested?

• Test A: Open the Key Details page on various mobile devices (or use browser dev tools to simulate different screen sizes) and verify that all text in the Metric components is visible without overflow.
• Test B: Check the layout on different screen sizes to ensure it responds correctly:
  • On mobile: should display 2 columns
  • On small screens: should display 3 columns
  • On medium and larger screens: should display 6 columns

Checklist

Required

• Filled out the "How to test" section in this PR
• Read Contributing Guide
• Self-reviewed my own code
• Commented on my code in hard-to-understand areas
• Ran pnpm build
• Ran pnpm fmt
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Unkey Docs if changes were necessary

Screen Recording

20240819_093639.mp4

[changeset-bot]

⚠️ No Changeset found

Latest commit: a4bf589

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@sreeharsha-rav is attempting to deploy a commit to the Unkey Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dashboard	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 9:18pm
planetfall	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 9:18pm
play	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 9:18pm
workflows	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 9:18pm
www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 19, 2024 9:18pm