fixes

src/app/[user]/components/user-info.tsx

@@ -165,7 +165,7 @@ const UserInfo: React.FC<UserInfoProps> = ({ user }) => {
         >
           <div
             ref={ProfileCardRef}
-            className='xl:sticky xl:h-fit xl:pb-4 overflow-visible'
+            className='xl:sticky xl:h-fit xl:pb-4'
             style={{
               top: '0px'
             }}

src/app/globals.css

@@ -31,7 +31,6 @@ body {
   left: -34vw;
   min-width: 210vw;
   height: 129vw;
-  overflow: visible;
   object-fit: cover;
   pointer-events: none;
 }

src/app/leaderboard/components/table.tsx

@@ -9,7 +9,7 @@ import { LEADERBOARD_CHUNK_SIZE, LEADERBOARD_FETCH_LIMIT_PARAM } from '#/lib/con
 import TableRow from './row.tsx'
 import Filters from './filters.tsx'
 import LoadingRow from './loading-row.tsx'
-import PageSelector from './page-selector.tsx'
+import PageSelector from '../../../components/page-selector.tsx'
 import useLeaderboard from '../hooks/useLeaderboard.ts'
 import type { LeaderboardItem } from '#/types/requests.ts'
 import type { LeaderboardFilter } from '#/types/common.ts'

src/components/home/components/latest-followers.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import ProfileList from '#/components/profile-list'
 import { useLatestFollowers } from '../hooks/use-latest-followers'
-import PageSelector from '#/app/leaderboard/components/page-selector'
+import PageSelector from '#/components/page-selector'
 
 const LatestFollowers = () => {
   const { t } = useTranslation()

src/components/home/components/leaderboard-summary.tsx

@@ -1,4 +1,4 @@
-import PageSelector from '#/app/leaderboard/components/page-selector'
+import PageSelector from '#/components/page-selector'
 import { useTranslation } from 'react-i18next'
 import { useLeaderboardSummary } from '../hooks/useLeaderboardSummary'
 import { leaderboardFilters, leaderboardFiltersEmojies } from '#/lib/constants'

src/components/navigation/components/menu.tsx

@@ -9,11 +9,11 @@ import { useState, type Dispatch, type SetStateAction } from 'react'
 import { cn } from '#/lib/utilities'
 import { socials } from '#/components/footer'
 import { usePathname } from 'next/navigation'
-import VolumeSwitcher, { volumeOptions } from './volume-switcher'
 import LanguageSelector from './language-selector'
 import { LANGUAGES } from '#/lib/constants/languages'
 import { EXTERNAL_LINKS, NAV_ITEMS } from '#/lib/constants'
 import { useEFPProfile } from '#/contexts/efp-profile-context'
+import VolumeSwitcher, { volumeOptions } from './volume-switcher'
 import ThemeSwitcher, { themesWithIcons } from '#/components/navigation/components/theme-switcher'
 
 interface MenuProps {
@@ -42,7 +42,7 @@ const Menu: React.FC<MenuProps> = ({ open, setOpen }) => {
   return (
     <div
       className={cn(
-        'bg-neutral w-[220px] z-50 overflow-x-hidden sm:overflow-visible shadow-md border-[3px] transition-transform rounded-md border-grey absolute top-[120%] flex flex-col items-end -left-[90px]'
+        'bg-neutral w-[220px] z-50 overflow-x-hidden sm:overflow-auto shadow-md border-[3px] transition-transform rounded-md border-grey absolute top-[120%] flex flex-col items-end -left-[90px]'
       )}
     >
       <div

src/components/navigation/components/wallet-menu.tsx

@@ -130,7 +130,7 @@ const WalletMenu: React.FC<WalletMenuProps> = ({ isResponsive = true }) => {
       {walletMenOpenu && (
         <div
           className={cn(
-            'flex w-56 overflow-x-hidden sm:overflow-visible z-50 h-fit shadow-md border-[3px] rounded-lg bg-neutral border-grey absolute top-[120%] flex-col items-end right-0'
+            'flex w-56 overflow-x-hidden sm:overflow-auto z-50 h-fit shadow-md border-[3px] rounded-lg bg-neutral border-grey absolute top-[120%] flex-col items-end right-0'
           )}
         >
           <div

src/app/leaderboard/components/page-selector.tsx → src/components/page-selector.tsx

@@ -62,6 +62,7 @@ const PageSelector: React.FC<PageSelectorProps> = ({
         <button
           onClick={() => handlePageChange(1)}
           disabled={page === 1}
+          aria-label='skip to first page'
           className='glass-card flex items-center hover:scale-110 disabled:hover:scale-100 justify-center font-bold group h-9 w-9 border-[3px] hover:border-text border-text/40 transition-all rounded-[10px] disabled:border-text/10'
         >
           <MdKeyboardDoubleArrowLeft className='w-6 h-6 group-hover:opacity-100 opacity-40 dark:opacity-80 group-disabled:opacity-20 transition-opacity' />
@@ -70,6 +71,7 @@ const PageSelector: React.FC<PageSelectorProps> = ({
       <button
         onClick={() => handlePageChange(page - 1)}
         disabled={page === 1}
+        aria-label='previous page'
         className='glass-card flex items-center hover:scale-110 disabled:hover:scale-100 justify-center font-bold group hover:border-text h-9 w-9 border-[3px] border-text/40 transition-all rounded-[10px] disabled:border-text/10'
       >
         <MdKeyboardArrowLeft className='w-6 h-6 group-hover:opacity-100 opacity-40 dark:opacity-80 group-disabled:opacity-20 transition-opacity' />
@@ -82,6 +84,7 @@ const PageSelector: React.FC<PageSelectorProps> = ({
       <button
         onClick={() => handlePageChange(page + 1)}
         disabled={!hasNextPage}
+        aria-label='next page'
         className='glass-card flex items-center hover:scale-110 disabled:hover:scale-100 justify-center font-bold group hover:border-text h-9 w-9 border-[3px] border-text/40 transition-all rounded-[10px] disabled:border-text/10'
       >
         <MdKeyboardArrowRight className='w-6 h-6 group-hover:opacity-100 opacity-40 dark:opacity-80 group-disabled:opacity-20 transition-opacity' />

src/components/recommendations.tsx

@@ -9,7 +9,7 @@ import ProfileList from '#/components/profile-list'
 import type { DiscoverItemType } from '#/types/requests'
 import { useEFPProfile } from '#/contexts/efp-profile-context'
 import { fetchRecommendations } from '#/api/recommended/fetch-recommendations'
-import PageSelector from '#/app/leaderboard/components/page-selector'
+import PageSelector from '#/components/page-selector'
 
 interface RecommendationsProps {
   header?: string

src/components/user-profile-card/components/top-row.tsx

@@ -80,6 +80,7 @@ const TopRow: React.FC<TopRowProps> = ({
           <button
             className='bg-neutral/80 p-1.5 rounded-full hover:scale-110 transition-all'
             onClick={() => refetchProfile()}
+            aria-label='refresh profile'
           >
             <FaSyncAlt />
           </button>

src/components/user-profile-card/index.tsx

@@ -115,9 +115,7 @@ const UserProfileCard: React.FC<UserProfileCardProps> = ({
                 alt='profile header'
                 width={360}
                 height={120}
-                className={cn(
-                  'w-full h-[120px] absolute object-cover rounded-t-lg top-0 left-0 -z-10'
-                )}
+                className={cn('w-full absolute object-cover rounded-t-lg top-0 left-0 -z-10')}
                 unoptimized={true}
               />
             )}