+8

src/hooks/useIsMobile.ts

··· 28 28 isMobile, 29 29 }; 30 30 } 31 31 + 32 32 + export function useIsPWA() { 33 33 + return window.matchMedia("(display-mode: standalone)").matches; 34 34 + } 35 35 + 36 36 + export function useIsIOS() { 37 37 + return /iPad|iPhone|iPod/.test(navigator.userAgent); 38 38 + }

+8 -2

src/pages/Settings.tsx

··· 22 22 import { Transition } from "@/components/utils/Transition"; 23 23 import { useAuth } from "@/hooks/auth/useAuth"; 24 24 import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; 25 25 - import { useIsMobile } from "@/hooks/useIsMobile"; 25 25 + import { useIsIOS, useIsMobile, useIsPWA } from "@/hooks/useIsMobile"; 26 26 import { useSettingsState } from "@/hooks/useSettingsState"; 27 27 import { AccountActionsPart } from "@/pages/parts/settings/AccountActionsPart"; 28 28 import { AccountEditPart } from "@/pages/parts/settings/AccountEditPart"; ··· 60 60 const searchRef = useRef<HTMLInputElement>(null); 61 61 const bannerSize = useBannerSize(); 62 62 63 63 + const isPWA = useIsPWA(); 64 64 + const isIOS = useIsIOS(); 65 65 + const isIOSPWA = isIOS && isPWA; 66 66 + 63 67 // Navbar height is 80px (h-20) 64 68 const navbarHeight = 80; 65 69 // On desktop: inline with navbar (same top position + 14px adjustment) 66 70 // On mobile: below navbar (navbar height + banner) 67 67 - const topOffset = isMobile ? navbarHeight + bannerSize : bannerSize + 14; 71 71 + const topOffset = isMobile 72 72 + ? navbarHeight + bannerSize + (isIOSPWA ? 34 : 0) 73 73 + : bannerSize + 14; 68 74 69 75 return ( 70 76 <WideContainer ultraWide classNames="overflow-visible">

+9 -3

src/pages/parts/home/HeroPart.tsx

··· 6 6 import { ThinContainer } from "@/components/layout/ThinContainer"; 7 7 import { useSlashFocus } from "@/components/player/hooks/useSlashFocus"; 8 8 import { HeroTitle } from "@/components/text/HeroTitle"; 9 9 - import { useIsMobile } from "@/hooks/useIsMobile"; 9 9 + import { useIsIOS, useIsMobile, useIsPWA } from "@/hooks/useIsMobile"; 10 10 import { useIsTV } from "@/hooks/useIsTv"; 11 11 import { useRandomTranslation } from "@/hooks/useRandomTranslation"; 12 12 import { useSearchQuery } from "@/hooks/useSearchQuery"; ··· 55 55 [setIsSticky], 56 56 ); 57 57 58 58 + const isPWA = useIsPWA(); 59 59 + const isIOS = useIsIOS(); 60 60 + const isIOSPWA = isIOS && isPWA; 61 61 + 58 62 // Navbar height is 80px (h-20) 59 63 const navbarHeight = 80; 60 60 - // On desktop: inline with navbar (same top position) 64 64 + // On desktop: inline with navbar (same top position + 14px adjustment) 61 65 // On mobile: below navbar (navbar height + banner) 62 62 - const topOffset = isMobile ? navbarHeight + bannerSize : bannerSize + 14; 66 66 + const topOffset = isMobile 67 67 + ? navbarHeight + bannerSize + (isIOSPWA ? 34 : 0) 68 68 + : bannerSize + 14; 63 69 64 70 const time = getTimeOfDay(new Date()); 65 71 const title = randomT(`home.titles.${time}`);