hh
f7ccd21d7b
The panel measured itself once, a fixed delay into the keyboard's animation, so it landed against a viewport that was still moving - and in a sidedock drawer no resize event fires at all, so it never moved. It now re-places every frame until its own position holds still, which needs neither a duration to guess nor an event to wait for. Its input taking focus is another trigger: that is what opens the keyboard in the first place. The preview had no viewport meta, so a 390px window still laid out at 980px: every "mobile" screenshot was a desktop one at a phone's aspect, and coarse-pointer rules could not apply. Which is why the tap targets looked fine here and were not.
42 lines
1.2 KiB
HTML
42 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<!-- Without this a phone-sized window still lays out at 980px, so a
|
|
"mobile" screenshot is not one and coarse-pointer rules never apply. -->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>beaver-calendar preview</title>
|
|
<link rel="stylesheet" href="/app.css" />
|
|
<link rel="stylesheet" href="/theme.css" />
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
<!-- Other plugins' stylesheets (EXTRA_CSS), after ours like a later plugin. -->
|
|
<link rel="stylesheet" href="/extra.css" />
|
|
<style>
|
|
body.theme-dark,
|
|
body.theme-light {
|
|
--accent-h: 254;
|
|
--accent-s: 80%;
|
|
--accent-l: 68%;
|
|
--font-interface:
|
|
-apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
|
|
sans-serif;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background: var(--background-primary);
|
|
}
|
|
|
|
#app {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="theme-dark">
|
|
<div id="app"></div>
|
|
<script src="/preview/bundle.js"></script>
|
|
</body>
|
|
</html>
|