pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
fix PWA searchbar padding
+25
-5
+8
src/hooks/useIsMobile.ts
+8
src/hooks/useIsMobile.ts
+8
-2
src/pages/Settings.tsx
+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
-
import { useIsMobile } from "@/hooks/useIsMobile";
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
+
const isPWA = useIsPWA();
64
+
const isIOS = useIsIOS();
65
+
const isIOSPWA = isIOS && isPWA;
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
-
const topOffset = isMobile ? navbarHeight + bannerSize : bannerSize + 14;
71
+
const topOffset = isMobile
72
+
? navbarHeight + bannerSize + (isIOSPWA ? 34 : 0)
73
+
: bannerSize + 14;
68
74
69
75
return (
70
76
<WideContainer ultraWide classNames="overflow-visible">
+9
-3
src/pages/parts/home/HeroPart.tsx
+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
-
import { useIsMobile } from "@/hooks/useIsMobile";
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
+
const isPWA = useIsPWA();
59
+
const isIOS = useIsIOS();
60
+
const isIOSPWA = isIOS && isPWA;
61
+
58
62
// Navbar height is 80px (h-20)
59
63
const navbarHeight = 80;
60
-
// On desktop: inline with navbar (same top position)
64
+
// On desktop: inline with navbar (same top position + 14px adjustment)
61
65
// On mobile: below navbar (navbar height + banner)
62
-
const topOffset = isMobile ? navbarHeight + bannerSize : bannerSize + 14;
66
+
const topOffset = isMobile
67
+
? navbarHeight + bannerSize + (isIOSPWA ? 34 : 0)
68
+
: bannerSize + 14;
63
69
64
70
const time = getTimeOfDay(new Date());
65
71
const title = randomT(`home.titles.${time}`);