quick fix for mobile scrolling

This commit is contained in:
Justin Visser 2026-02-20 12:42:18 +01:00
parent 14eb2fe2b2
commit a527e7a535
2 changed files with 6 additions and 8 deletions

View file

@ -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>

View file

@ -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,