quick fix for mobile scrolling #13
2 changed files with 6 additions and 8 deletions
|
|
@ -36,7 +36,7 @@ watch(showChrome, (value) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="h-[100dvh] max-h-[100dvh] w-full max-w-full overflow-hidden">
|
<div class="min-h-[100dvh] w-full max-w-full overflow-visible lg:h-[100dvh] lg:max-h-[100dvh] lg:overflow-hidden">
|
||||||
<a href="#app-main" class="skip-link">Skip to main content</a>
|
<a href="#app-main" class="skip-link">Skip to main content</a>
|
||||||
<RequestErrorPanel />
|
<RequestErrorPanel />
|
||||||
|
|
||||||
|
|
@ -46,9 +46,7 @@ watch(showChrome, (value) => {
|
||||||
:menu-open="isMobileNavOpen"
|
:menu-open="isMobileNavOpen"
|
||||||
@toggle-menu="toggleMobileNav"
|
@toggle-menu="toggleMobileNav"
|
||||||
/>
|
/>
|
||||||
<div
|
<div class="relative min-h-0 lg:grid lg:h-[calc(100dvh-4.5rem)] lg:grid-cols-[17rem_minmax(0,1fr)] lg:grid-rows-1">
|
||||||
class="relative h-[calc(100dvh-4.5rem)] min-h-0 lg:grid lg:grid-cols-[17rem_minmax(0,1fr)] lg:grid-rows-1"
|
|
||||||
>
|
|
||||||
<button
|
<button
|
||||||
v-if="isMobileNavOpen"
|
v-if="isMobileNavOpen"
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -68,8 +66,8 @@ watch(showChrome, (value) => {
|
||||||
</div>
|
</div>
|
||||||
<main
|
<main
|
||||||
id="app-main"
|
id="app-main"
|
||||||
class="min-h-0 min-w-0 overflow-x-hidden px-4 py-6 sm:px-6 lg:col-start-2 lg:px-8"
|
class="min-h-0 min-w-0 overflow-x-hidden overflow-y-visible px-4 py-6 sm:px-6 lg:col-start-2 lg:overflow-y-auto lg:px-8"
|
||||||
:class="shouldLockMainScroll ? 'overflow-y-auto lg:overflow-y-hidden' : 'overflow-y-auto'"
|
:class="shouldLockMainScroll ? 'lg:overflow-y-hidden' : ''"
|
||||||
>
|
>
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</main>
|
</main>
|
||||||
|
|
@ -79,7 +77,7 @@ watch(showChrome, (value) => {
|
||||||
<main
|
<main
|
||||||
id="app-main"
|
id="app-main"
|
||||||
v-else
|
v-else
|
||||||
class="h-[100dvh] max-h-[100dvh] min-h-0 min-w-0 overflow-y-auto overflow-x-hidden"
|
class="min-h-[100dvh] min-w-0 overflow-x-hidden overflow-y-visible lg:h-[100dvh] lg:max-h-[100dvh] lg:overflow-y-auto"
|
||||||
>
|
>
|
||||||
<RouterView />
|
<RouterView />
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -137,7 +137,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@apply overflow-hidden bg-surface-app text-ink-primary antialiased transition-colors duration-300;
|
@apply overflow-x-hidden overflow-y-auto bg-surface-app text-ink-primary antialiased transition-colors duration-300 lg:overflow-hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue