@ -3,3 +3,7 @@ body,
#app {
height: 100%;
}
body {
padding-bottom: constant(safe-area-inset-bottom);
@ -333,7 +333,7 @@ const wrapClass = computed(() => {
const footerClass = computed(() => {
let classes = ['p-4']
if (isMobile.value)
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'h-14', 'overflow-hidden']
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
return classes
})
@ -32,6 +32,15 @@ const getMobileClass = computed<CSSProperties>(() => {
return {}
const mobileSafeArea = computed(() => {
if (isMobile.value) {
return {
paddingBottom: 'env(safe-area-inset-bottom)',
watch(
isMobile,
(val) => {
@ -56,7 +65,7 @@ watch(
:style="getMobileClass"
@update-collapsed="handleUpdateCollapsed"
>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full" :style="mobileSafeArea">
<main class="flex flex-col flex-1 min-h-0">
<div class="p-4">
<NButton dashed block @click="handleAdd">