diff --git a/src/components/Contributors.jsx b/src/components/Contributors.jsx index 729390c..56d94e9 100644 --- a/src/components/Contributors.jsx +++ b/src/components/Contributors.jsx @@ -279,6 +279,18 @@ const Contributors = () => { return result; }, [contributors, debouncedSearch, selectedRankFilter, sortBy]); + // Lock body scroll when modal is open + useEffect(() => { + if (showModal) { + document.body.style.overflow = 'hidden'; + } else { + document.body.style.overflow = 'unset'; + } + return () => { + document.body.style.overflow = 'unset'; + }; + }, [showModal]); + const handleOpenModal = useCallback((contributor) => { setSelectedContributor(contributor); setShowModal(true); diff --git a/src/components/Navbar.css b/src/components/Navbar.css index c038df0..b12837f 100644 --- a/src/components/Navbar.css +++ b/src/components/Navbar.css @@ -1338,6 +1338,7 @@ padding: 0.875rem 1rem; font-size: 0.95rem; font-weight: 600; + display: block; } .mobile-auth .navbar-btn-login { diff --git a/src/components/contributors.css b/src/components/contributors.css index a8ec0a8..c35e1bc 100644 --- a/src/components/contributors.css +++ b/src/components/contributors.css @@ -777,7 +777,9 @@ body::before { max-width: 700px; max-height: 85vh; width: 92%; - overflow-y: auto; + display: flex; + flex-direction: column; + overflow: hidden; animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: var(--shadow-lg), var(--shadow-purple-glow); position: relative; @@ -805,9 +807,9 @@ body::before { align-items: center; padding: 2.5rem 2.5rem 2rem; border-bottom: 1px solid var(--border-base); - position: sticky; - top: 0; - background: linear-gradient(to bottom, var(--bg-surface), transparent); + position: relative; + flex-shrink: 0; + background: var(--bg-surface); z-index: 10; } @@ -845,7 +847,9 @@ body::before { .contributors-modal-body { padding: 0 2.5rem 2.5rem; - max-height: 550px; + overflow-y: auto; + flex: 1; + -webkit-overflow-scrolling: touch; } .contributors-modal-pr-list { @@ -969,12 +973,20 @@ body::before { .contributors-stats { gap: 1.5rem; } .contributors-modal-header { flex-direction: column; - gap: 1.5rem; - text-align: center; + gap: 1rem; + text-align: center; + padding: 1.5rem; + } + .contributors-modal-body { + padding: 0 1.5rem 1.5rem; } .contributors-filters{ flex-direction: column; } + .contributors-modal { + max-height: 90vh; + width: 95%; + } } @media (max-width: 480px) { @@ -1043,8 +1055,11 @@ body::before { } .project-admin-container { - background: linear-gradient(165deg, rgba(24, 10, 65, 0.97) 0%, rgba(12, 4, 30, 0.99) 60%, rgba(18, 8, 50, 0.97) 100%); - border: 1px solid rgba(147, 51, 234, 0.3); + background: + linear-gradient(165deg, rgba(24, 10, 65, 0.97) 0%, rgba(12, 4, 30, 0.99) 60%, rgba(18, 8, 50, 0.97) 100%) padding-box, + linear-gradient(90deg, var(--gold-500), var(--primary-500), var(--accent-cyan), var(--gold-500)) border-box; + background-size: 100% 100%, 300% 100%; + border: 3px solid transparent; border-radius: var(--radius-lg); padding: 3rem; position: relative; @@ -1054,23 +1069,12 @@ body::before { 0 0 40px rgba(147, 51, 234, 0.15); transition: var(--transition-slow); max-width: 640px; - margin: 0 auto 3rem; -} - -/* Animated gradient top border */ -.project-admin-container::before { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - height: 3px; - background: linear-gradient(90deg, var(--gold-500), var(--primary-500), var(--accent-cyan), var(--gold-500)); - background-size: 300% 100%; + margin: 3rem auto; animation: shimmerWave 4s linear infinite; - z-index: 2; } + + /* Corner accent orb */ .project-admin-container::after { content: ''; @@ -1283,9 +1287,10 @@ body::before { } .project-admin-container { - margin: 0 0 2rem; - padding: 2rem 1.5rem; + margin: 2rem auto; + padding: 2rem; max-width: 100%; + text-align: center; } .project-admin-avatar-wrapper {