fix(floating): fix panel top offset

Author: dvcol

src/components/AppComponent.vue

@@ -219,6 +219,10 @@ const onBack = () => {
 
   :deep(.root-panel-wrapper.n-drawer) {
     transition: all 0.3s var(--n-bezier);
+
+    .n-drawer-content-wrapper {
+      overscroll-behavior: none;
+    }
   }
 
   &.watching {
@@ -245,6 +249,10 @@ const onBack = () => {
       bottom: auto;
     }
 
+    :deep(.root-panel-wrapper.n-drawer) {
+      padding-bottom: layout.$header-navbar-height;
+    }
+
     &.watching {
       :deep(.root-panel-wrapper.n-drawer) {
         padding-top: layout.$top-safe-watching-height;
@@ -260,8 +268,8 @@ const onBack = () => {
     }
 
     main {
-      min-height: layout.$floating-content-height;
-      margin-top: layout.$safe-area-inset-top;
+      min-height: var(--full-height);
+      margin-top: 0;
     }
 
     :deep(.root-panel-wrapper.n-drawer) {

src/components/common/list/ListScroll.vue

@@ -18,7 +18,7 @@ import {
 } from '~/models/list-scroll.model';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
 import { useWatchingStoreRefs } from '~/stores/data/watching.store';
-import { Watching } from '~/styles/layout.style';
+import { Header, Watching } from '~/styles/layout.style';
 import { watchMedia } from '~/utils/window.utils';
 
 const listRef = ref<VirtualListRef>();
@@ -207,14 +207,15 @@ const topInset = computed(() => {
 const listPaddingTop = computed(() => {
   const offset = topInset.value;
   if (listOptions?.value?.paddingTop) return offset + listOptions.value.paddingTop;
-  if (floating.value) return offset + 10;
-  if (reverse.value)
-    return isWatching.value ? offset + 16 + Watching.Height : offset + 16;
+  if (floating.value) return offset + Header.navbarHeight + Header.floatingOffset + 14;
+  if (reverse.value && isWatching.value) return offset + 16 + Watching.Height;
+  if (reverse.value) return offset + 16;
   return offset + 60;
 });
 const listPaddingBottom = computed(() => {
   if (listOptions?.value?.paddingBottom) return listOptions.value.paddingBottom;
-  if (reverse.value) return 8 + 16;
+  if (reverse.value) return 8 + Header.navbarHeight;
+  if (isWatching.value) return 8 + Watching.Height;
   return 8;
 });
 </script>

src/components/views/checkin/CheckinComponent.vue

@@ -412,7 +412,7 @@ const onClick = () => {
 
       &.reverse {
         height: layout.$top-safe-watching-height;
-        padding-top: calc(#{layout.$safe-area-inset-top} / 1.5);
+        padding-top: layout.$safe-area-inset-top;
 
         &:active,
         &:focus-within,

src/components/views/progress/ProgressComponent.vue

@@ -32,8 +32,6 @@ const { isWatching } = useWatchingStoreRefs();
 const { scrolled, listRef, onClick } = useBackToTop();
 const { onItemClick } = usePanelItem();
 
-const { reverse } = useAppStateStoreRefs();
-
 onMounted(() => {
   watch(panelOpen, async value => {
     if (!value && panelDirty.value) await fetchProgress();
@@ -105,7 +103,6 @@ useActiveAndDocumentVisible({
         ref="listRef"
         :loading="loading"
         :items="progress"
-        :list-options="reverse ? { paddingBottom: 44 } : {}"
         backdrop
         hide-date
         show-progress

src/stores/app-state.store.ts

@@ -64,15 +64,15 @@ export const useAppStateStore = defineStore('app.state', () => {
     root,
     reverse: computed(() => {
       if (navbarPosition.value === NavbarPosition.Bottom) return true;
-      if (!isWeb.value) return false;
+      if (isPopup.value) return false;
       // web and small screen only
       return navbarPosition.value === NavbarPosition.Auto && bottom.width;
     }),
     floating: computed(() => {
       if (minimum.width) return false;
       // if (panelOpen.value) return false;
       if (navbarPosition.value === NavbarPosition.Floating) return true;
-      if (!isWeb.value) return false;
+      if (isPopup.value) return false;
       // web & big screen only
       return navbarPosition.value === NavbarPosition.Auto && floating.width === false;
     }),

src/styles/layout.scss

@@ -24,12 +24,12 @@ $floating-content-height: $safe-full-height;
 $bottom-content-height: calc(var(--full-height) - #{$header-navbar-height});
 
 // Watching
-$watching-height: 1.75rem;
+$watching-height: 2rem;
 $watching-open-height: 3rem;
 $safe-watching-height: calc(#{$watching-height} + #{$safe-area-inset-bottom / 1.5});
 $safe-watching-open-height: calc(#{$watching-open-height} + #{$safe-area-inset-bottom / 1.5});
-$top-safe-watching-height: calc(#{$watching-height} + #{$safe-area-inset-top / 1.5});
-$top-safe-watching-open-height: calc(#{$watching-open-height} + #{$safe-area-inset-top / 1.5});
+$top-safe-watching-height: calc(#{$watching-height} + #{$safe-area-inset-top});
+$top-safe-watching-open-height: calc(#{$watching-open-height} + #{$safe-area-inset-top});
 
 // Navbar transition
 $navbar-transition: 0.5s var(--n-bezier);

src/styles/layout.style.ts

@@ -1,10 +1,11 @@
 export const Header = {
+  floatingOffset: 16,
   navbarHeight: 44,
   drawerHeight: 56,
   totalHeight: 100,
 } as const;
 
 export const Watching = {
-  Height: 28,
+  Height: 32,
   OpenHeight: 48,
 };