OWASP / OWASP/Nest

[UX] Implement Structured Skeletons and Fix Responsive Map Overflows

Open
#4,439 4 comments 0 reactions 0 assignees View on GitHub
bug enhancement
Dominant language
Python
Stars
451
Forks
707
Avg merge
22h 59m
Merged PRs (30d)
91

Description

### **Description:**
The current loading experience on project detail pages uses a generic full-page spinner, which causes layout shifts. Additionally, certain interactive elements like author avatars have suboptimal tap targets, and the Chapter Map overflows on small mobile screens.

### **Changes Proposed:**
- UX (Loading): Replaced the central LoadingSpinner with structured AboutSkeleton blocks in ProjectDetailsPage for
better perceived performance.
- A11y (Tap Targets): Increased the author avatar size in Release.tsx to 32px to meet mobile touch target accessibility
standards.

### **Responsive Fix:**

Updated CardDetailsPage to use an aspect-video container for Chapter Maps instead of a fixed h-[250px], preventing map compression and layout breaks on mobile.
Impact: Improves the perceived speed of the application and ensures a robust experience across all device form factors.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.