fix(floating): auto coerce to top when below threshold

Author: dvcol

src/components/AppComponent.vue

@@ -155,8 +155,6 @@ const onBack = () => {
 @include transition.scale;
 
 .app-container {
-  --max-header-width: 800px;
-
   overflow: hidden;
 
   header {
@@ -257,8 +255,8 @@ const onBack = () => {
   &.floating {
     header {
       top: layout.$floating-navbar-offset;
-      left: calc(50% - var(--max-header-width) / 2);
-      width: var(--max-header-width);
+      left: calc(50% - #{layout.$floating-navbar-width} / 2);
+      width: layout.$floating-navbar-width;
     }
 
     main {

src/components/views/checkin/CheckinComponent.vue

@@ -409,16 +409,16 @@ const onClick = () => {
           color: var(--white-80);
         }
       }
-    }
 
-    &.reverse {
-      height: layout.$top-safe-watching-height;
-      padding-top: calc(#{layout.$safe-area-inset-top} / 1.5);
+      &.reverse {
+        height: layout.$top-safe-watching-height;
+        padding-top: calc(#{layout.$safe-area-inset-top} / 1.5);
 
-      &:active,
-      &:focus-within,
-      &:hover {
-        height: layout.$watching-open-height;
+        &:active,
+        &:focus-within,
+        &:hover {
+          height: layout.$watching-open-height;
+        }
       }
     }
   }

src/stores/app-state.store.ts

@@ -38,12 +38,13 @@ export const useAppStateStore = defineStore('app.state', () => {
 
   const { navbarPosition } = useExtensionSettingsStoreRefs();
 
-  const { mobile, tablet } = watchBreakpoint(
+  const { bottom, minimum, floating } = watchBreakpoint(
     appRef,
-    { mobile: 600, tablet: 1300 },
+    { bottom: 400, minimum: 800, floating: 1000 },
     {
-      mobile: { width: window.innerWidth < 600 },
-      tablet: { width: window.innerWidth < 1300 },
+      bottom: { width: window.innerWidth < 400 },
+      minimum: { width: window.innerWidth < 800 },
+      floating: { width: window.innerWidth < 1000 },
     },
   );
 
@@ -65,14 +66,15 @@ export const useAppStateStore = defineStore('app.state', () => {
       if (navbarPosition.value === NavbarPosition.Bottom) return true;
       if (!isWeb.value) return false;
       // web and small screen only
-      return navbarPosition.value === NavbarPosition.Auto && mobile.width;
+      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;
       // web & big screen only
-      return navbarPosition.value === NavbarPosition.Auto && tablet.width === false;
+      return navbarPosition.value === NavbarPosition.Auto && floating.width === false;
     }),
   };
 });

src/styles/layout.scss

@@ -14,6 +14,7 @@ $safe-content-height: calc(var(--full-height) - #{$safe-navbar-height});
 $safe-full-height: calc(var(--full-height) - #{$safe-area-inset-top});
 
 // floating navbar
+$floating-navbar-width: 800px;
 $floating-navbar-offset: calc(1rem + #{$safe-area-inset-top / 3});
 $floating-navbar-height: calc(#{$floating-navbar-offset} + #{$header-navbar-height});
 $floating-open-drawer-height: calc(#{$floating-navbar-height} + #{$header-drawer-height});

src/utils/window.utils.ts

@@ -36,7 +36,7 @@ export const watchSize = (element: Ref<Element | undefined>, cb: ResizeObserverC
 export const watchBreakpoint = <Name extends string, Value extends number>(
   element: Ref<Element | undefined>,
   breakpoints: Record<Name, Value>,
-  seed?: Record<Name, { height?: boolean; width?: boolean }>,
+  seed?: Partial<Record<Name, { height?: boolean; width?: boolean }>>,
 ): Record<Name, { height?: boolean; width?: boolean }> => {
   const result = reactive<Record<string, { height?: boolean; width?: boolean }>>(
     Object.fromEntries(Object.keys(breakpoints).map(key => [key, { height: undefined, width: undefined, ...seed?.[key as Name] }])),