Ilia Denisov
b7d469a06e
Tests · UI / test (push) Successful in 17s
Third owner-review pass (iPhone): - Modals (and the chat) size their backdrop to window.visualViewport, so they stay fully above the software keyboard (dvh alone left the sheet partly behind it). - On the owner's call, every profile / new-game picker is a native <select> for consistent cross-platform behaviour: the away window returns to hour + 10-minute selects (which also avoids the iOS time-wheel "clear" button), alongside the offset timezone and the game-type / move-time / hints selects. Native time/wheel inputs render differently per OS and cannot be forced to match. - New-game "play with friends" has no preselected game type — an explicit, required pick (empty placeholder); Send invitation stays disabled until both a type and a friend are chosen. A smart default (from play history / language) is TODO-6.
83 lines
2.3 KiB
Svelte
83 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
|
|
let {
|
|
title = '',
|
|
onclose,
|
|
children,
|
|
}: { title?: string; onclose?: () => void; children?: Snippet } = $props();
|
|
|
|
// Track the visual viewport so the backdrop covers only the area above an open
|
|
// mobile keyboard: dvh alone shrinks the sheet but the fixed, layout-viewport
|
|
// backdrop still centres it behind the keyboard. Sizing the backdrop to
|
|
// visualViewport keeps the sheet (and the start of a chat) fully on screen.
|
|
let vh = $state(0);
|
|
let top = $state(0);
|
|
$effect(() => {
|
|
const vv = typeof window !== 'undefined' ? window.visualViewport : null;
|
|
if (!vv) return;
|
|
const update = () => {
|
|
vh = vv.height;
|
|
top = vv.offsetTop;
|
|
};
|
|
update();
|
|
vv.addEventListener('resize', update);
|
|
vv.addEventListener('scroll', update);
|
|
return () => {
|
|
vv.removeEventListener('resize', update);
|
|
vv.removeEventListener('scroll', update);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div
|
|
class="backdrop"
|
|
style:height={vh ? `${vh}px` : null}
|
|
style:top={vh ? `${top}px` : null}
|
|
onclick={() => onclose?.()}
|
|
>
|
|
<div class="sheet" role="dialog" aria-modal="true" tabindex="-1" onclick={(e) => e.stopPropagation()}>
|
|
{#if title}<h2>{title}</h2>{/if}
|
|
{@render children?.()}
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.backdrop {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
/* Base fallback; overridden inline to the visual-viewport height/top so the
|
|
backdrop (and the centred sheet) stay above an open mobile keyboard. */
|
|
height: 100dvh;
|
|
box-sizing: border-box;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
z-index: 40;
|
|
}
|
|
.sheet {
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
padding: var(--pad);
|
|
width: min(94vw, 420px);
|
|
/* dvh tracks the dynamic viewport, so the sheet shrinks above an open mobile
|
|
keyboard instead of being scrolled off the top (vh fallback first). */
|
|
max-height: 86vh;
|
|
max-height: 86dvh;
|
|
overflow: auto;
|
|
}
|
|
h2 {
|
|
margin: 0 0 10px;
|
|
font-size: 1.05rem;
|
|
}
|
|
</style>
|