fix(responsive): various sizing and css fix for mobile views

Author: dvcol

src/components/AppComponent.vue

@@ -93,7 +93,7 @@ const onBack = () => {
       <RouterView v-slot="{ Component }">
         <main
           ref="mainRef"
-          :class="{ 'full-height': !isAuthenticated, 'loading': !Component }"
+          :class="{ loading: !Component }"
           @touchstart.passive="NavbarService.hideDrawer"
         >
           <GridBackground v-if="!Component" :size="20" />
@@ -192,22 +192,12 @@ const onBack = () => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    min-height: layout.$safe-content-height;
-    margin-top: layout.$safe-navbar-height;
+    min-height: layout.$content-height;
     padding-right: calc(#{layout.$safe-area-inset-right} / 1.5);
     padding-left: calc(#{layout.$safe-area-inset-left} / 1.5);
     transition:
       min-height 0.5s var(--n-bezier),
       margin-top 0.5s var(--n-bezier);
-
-    &.full-height {
-      min-height: var(--full-height);
-      margin-top: 0;
-
-      :deep(.loading-container) {
-        padding-top: layout.$safe-navbar-height;
-      }
-    }
   }
 
   footer {
@@ -218,10 +208,15 @@ const onBack = () => {
   }
 
   :deep(.root-panel-wrapper.n-drawer) {
+    padding-top: layout.$safe-navbar-height;
     transition: all 0.3s var(--n-bezier);
 
     .n-drawer-content-wrapper {
       overscroll-behavior: none;
+
+      .loading-container {
+        min-height: calc(var(--height-90-dvh) - #{layout.$safe-navbar-height});
+      }
     }
   }
 
@@ -231,17 +226,28 @@ const onBack = () => {
     }
   }
 
+  &.floating {
+    header {
+      top: layout.$floating-navbar-offset;
+      left: calc(50% - #{layout.$floating-navbar-width} / 2);
+      width: layout.$floating-navbar-width;
+    }
+  }
+
   &.reverse {
     header {
       top: auto;
-      bottom: calc(0% - #{layout.$safe-area-inset-bottom});
+      bottom: calc(0% - #{layout.$safe-area-inset-top});
       flex-direction: column-reverse;
+
+      > :first-child {
+        padding-bottom: calc(#{layout.$safe-area-inset-bottom / 2});
+      }
     }
 
     main {
-      min-height: layout.$bottom-content-height;
+      min-height: layout.$safe-bottom-content-height;
       margin-top: 0;
-      margin-bottom: layout.$safe-navbar-height;
     }
 
     footer {
@@ -250,7 +256,10 @@ const onBack = () => {
     }
 
     :deep(.root-panel-wrapper.n-drawer) {
-      padding-bottom: layout.$header-navbar-height;
+      padding-top: layout.$safe-area-inset-top;
+      padding-bottom: calc(
+        #{layout.$safe-navbar-height} + #{layout.$safe-area-inset-bottom / 2}
+      );
     }
 
     &.watching {
@@ -259,22 +268,5 @@ const onBack = () => {
       }
     }
   }
-
-  &.floating {
-    header {
-      top: layout.$floating-navbar-offset;
-      left: calc(50% - #{layout.$floating-navbar-width} / 2);
-      width: layout.$floating-navbar-width;
-    }
-
-    main {
-      min-height: var(--full-height);
-      margin-top: 0;
-    }
-
-    :deep(.root-panel-wrapper.n-drawer) {
-      margin-top: layout.$floating-navbar-height;
-    }
-  }
 }
 </style>

src/components/common/buttons/FloatingButton.vue

@@ -77,13 +77,12 @@ const emit = defineEmits<{
   }
 
   &.reverse {
-    right: 1.5rem;
-    bottom: calc(1rem + #{layout.$header-navbar-height});
+    right: calc(1.5rem + #{layout.$safe-area-inset-right});
+    bottom: calc(1rem + #{layout.$safe-bottom-navbar-height});
     transition-delay: 0.5s;
 
     &.open {
-      right: 1.5rem;
-      bottom: calc(1rem + #{layout.$header-open-drawer-height});
+      bottom: calc(1rem + #{layout.$safe-bottom-open-drawer-height});
       transition-delay: 0s;
     }
   }

src/components/common/list/ListItemPanel.vue

@@ -460,7 +460,7 @@ const onTagClick = (url?: string) => {
   background: var(--bg-color-80);
 }
 
-// stylelint-disable-next-line selector-class-pattern -- framework overriding
+// stylelint-disable-next-line selector-class-pattern -- framework override
 .n-tag.n-tag--icon.tag.badge .n-tag__icon {
   margin: 0;
 }

src/components/common/list/ListScroll.vue

@@ -205,7 +205,7 @@ const topInset = computed(() => {
   return parseInt(inset, 10);
 });
 const listPaddingTop = computed(() => {
-  const offset = topInset.value;
+  const offset = topInset.value / 2;
   if (listOptions?.value?.paddingTop) return offset + listOptions.value.paddingTop;
   if (floating.value) return offset + Header.navbarHeight + Header.floatingOffset + 14;
   if (reverse.value && isWatching.value) return offset + 16 + Watching.Height;
@@ -335,11 +335,9 @@ const listPaddingBottom = computed(() => {
 @include animation.fade-in;
 
 .list-scroll {
-  height: var(--full-height);
-  margin-top: calc(0% - #{layout.$safe-navbar-height});
+  height: layout.$content-height;
   transition: margin-top 0.5s var(--n-bezier);
 
-  &.floating,
   &.reverse {
     margin-top: calc(0% - #{layout.$safe-area-inset-top});
   }

src/components/container/ContainerComponent.ce.vue

@@ -16,6 +16,7 @@ import MessageProvider from '~/components/container/MessageProvider.vue';
 import NotificationProvider from '~/components/container/NotificationProvider.vue';
 import { NavbarService } from '~/services/navbar.service';
 import { useAppStateStoreRefs } from '~/stores/app-state.store';
+import { useWatchingStoreRefs } from '~/stores/data/watching.store';
 import { useExtensionSettingsStoreRefs } from '~/stores/settings/extension.store';
 import { lazyComponent } from '~/utils/lazy.utils';
 import { addCustomProgressProperty } from '~/utils/style.utils';
@@ -32,6 +33,7 @@ const override: GlobalThemeOverrides = {
 const { drawer, open, dropdown } = NavbarService;
 const { enabledRoutes, backgroundColor } = useExtensionSettingsStoreRefs();
 const { root, floating, reverse } = useAppStateStoreRefs();
+const { isWatching } = useWatchingStoreRefs();
 
 onBeforeMount(() => addCustomProgressProperty());
 </script>
@@ -65,6 +67,7 @@ onBeforeMount(() => addCustomProgressProperty());
             open ? 'drawer-visible' : '',
             floating ? 'floating' : '',
             reverse ? 'reverse' : '',
+            isWatching ? 'watching' : '',
           ]
             .filter(Boolean)
             .join(' ')
@@ -84,6 +87,7 @@ onBeforeMount(() => addCustomProgressProperty());
             dropdown ? 'dropdown-visible' : '',
             floating ? 'floating' : '',
             reverse ? 'reverse' : '',
+            isWatching ? 'watching' : '',
           ]
             .filter(Boolean)
             .join(' ')
@@ -169,7 +173,11 @@ onBeforeMount(() => addCustomProgressProperty());
   }
 
   &.reverse {
-    top: 0.5rem;
+    top: calc(#{layout.$safe-area-inset-top} + 0.5rem);
+  }
+
+  &.watching {
+    top: calc(#{layout.$top-safe-watching-height} + 0.5rem);
   }
 }
 
@@ -198,7 +206,11 @@ onBeforeMount(() => addCustomProgressProperty());
   }
 
   &.reverse {
-    top: 0.5rem;
+    top: calc(#{layout.$safe-area-inset-top} + 0.5rem);
+
+    &.watching {
+      top: calc(#{layout.$top-safe-watching-height} + 0.5rem);
+    }
   }
 
   &:not(.reverse, .floating) {

src/components/views/about/AboutComponent.vue

@@ -133,25 +133,25 @@ const openRelease = (url?: string) => {
 
 .container {
   width: 100%;
-  height: layout.$safe-content-height;
+  height: layout.$content-height;
   background: transparent;
   transition: padding 0.5s var(--n-bezier);
 
   &.watching {
     padding-bottom: layout.$safe-watching-height;
   }
 
-  &.reverse {
-    margin-bottom: layout.$header-navbar-height;
+  .card {
+    @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
 
-    &.watching {
-      padding-top: layout.$top-safe-watching-height;
-      padding-bottom: 0;
-    }
+    margin-top: layout.$safe-navbar-height;
+    margin-bottom: layout.$safe-area-inset-bottom;
   }
 
-  .card {
-    @include mixin.hover-background($from: var(--bg-black-50), $to: var(--bg-color-80));
+  .link {
+    :deep(.label) {
+      padding: 0.15rem;
+    }
   }
 
   &.floating {
@@ -160,9 +160,15 @@ const openRelease = (url?: string) => {
     }
   }
 
-  .link {
-    :deep(.label) {
-      padding: 0.15rem;
+  &.reverse {
+    .card {
+      margin-top: layout.$safe-area-inset-top;
+      margin-bottom: layout.$header-navbar-height;
+    }
+
+    &.watching {
+      padding-top: layout.$top-safe-watching-height;
+      padding-bottom: 0;
     }
   }
 }

src/components/views/checkin/CheckinComponent.vue

@@ -411,7 +411,7 @@ const onClick = () => {
       }
 
       &.reverse {
-        height: layout.$top-safe-watching-height;
+        height: layout.$watching-height;
         padding-top: layout.$safe-area-inset-top;
 
         &:active,