Skip to content

feat: improve API Dashboard UX with side drawer and mobile optimizations#676

Open
Huxpro wants to merge 1 commit intolynx-family:mainfrom
Huxpro:feat/api-dashboard-ux-improvements
Open

feat: improve API Dashboard UX with side drawer and mobile optimizations#676
Huxpro wants to merge 1 commit intolynx-family:mainfrom
Huxpro:feat/api-dashboard-ux-improvements

Conversation

@Huxpro
Copy link
Collaborator

@Huxpro Huxpro commented Dec 25, 2025

Changes

  • Right-side drawer on desktop: API details drawer now opens from the right side on desktop (≥768px) for better UX, while maintaining bottom drawer on mobile
  • Enhanced drawer styling: Added 8px gap from screen edges, rounded corners (16px), and shadow for a modern look following Vaul's side drawer pattern
  • Mobile-optimized category table:
    • Smaller fonts and reduced padding for compact layout
    • Vertical layout for category name and missing badge on mobile
    • Text truncation with ellipsis for long category names
    • Smaller header fonts on mobile
  • New useMediaQuery hook: Added responsive detection hook for desktop/mobile breakpoints
  • Bug fix: Removed unwanted ::after pseudo-element on side drawers

Testing

  • Tested drawer opening from right side on desktop
  • Verified mobile layout remains compact and readable
  • Confirmed text truncation works properly for long category names

- Add right-side drawer on desktop for API details (opens from bottom on mobile)
- Enhance drawer styling with 8px gap from edges, rounded corners, and shadow
- Add useMediaQuery hook for responsive behavior detection
- Optimize CategoryTable for mobile: smaller fonts, reduced padding, vertical layout
- Fix unwanted ::after pseudo-element on side drawers
- Improve text truncation with ellipsis for long category names

Change-Id: Ibca11d7b79571086222f506aaad00423222268b5
@netlify
Copy link

netlify bot commented Dec 25, 2025

Deploy Preview for lynx-doc ready!

Name Link
🔨 Latest commit 05d9e13
🔍 Latest deploy log https://app.netlify.com/projects/lynx-doc/deploys/694d075e94af8a00080353f2
😎 Deploy Preview https://deploy-preview-676--lynx-doc.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant