zzstoatzz.io
+1
-1
frontend/src/app.html
+1
-1
frontend/src/app.html
···
2
2
<html lang="en">
3
3
<head>
4
4
<meta charset="utf-8" />
5
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
5
+
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
6
6
%sveltekit.head%
7
7
</head>
8
8
<body data-sveltekit-preload-data="hover">
+7
-2
frontend/src/lib/components/Player.svelte
+7
-2
frontend/src/lib/components/Player.svelte
···
303
303
<style>
304
304
.player {
305
305
position: fixed;
306
-
bottom: env(safe-area-inset-bottom, 0);
306
+
bottom: 0;
307
307
left: 0;
308
308
right: 0;
309
309
background: #1a1a1a;
310
310
border-top: 1px solid #333;
311
-
padding: 0.75rem 2rem 0.75rem 2rem;
311
+
padding: 0.75rem 2rem;
312
+
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
312
313
z-index: 100;
314
+
/* force player to stick to visual viewport bottom on iOS Chrome */
315
+
transform: translateZ(0);
316
+
-webkit-transform: translateZ(0);
313
317
}
314
318
315
319
.player-content {
···
596
600
@media (max-width: 768px) {
597
601
.player {
598
602
padding: 1rem;
603
+
padding-bottom: max(1rem, env(safe-area-inset-bottom));
599
604
}
600
605
601
606
.player-content {