Remove small 1px gap under mobile nav tabs when fully open

packages/desktop-client/src/components/mobile/MobileNavTabs.tsx

@@ -1,5 +1,9 @@
 // @ts-strict-ignore
-import React, { type ComponentType, type CSSProperties } from 'react';
+import React, {
+  useCallback,
+  type ComponentType,
+  type CSSProperties,
+} from 'react';
 import { NavLink } from 'react-router-dom';
 import { useSpring, animated, config } from 'react-spring';
 
@@ -23,6 +27,11 @@ import { useScrollListener } from '../ScrollProvider';
 const COLUMN_COUNT = 3;
 const PILL_HEIGHT = 15;
 const ROW_HEIGHT = 70;
+const TOTAL_HEIGHT = ROW_HEIGHT * COLUMN_COUNT;
+const OPEN_FULL_Y = 1;
+const OPEN_DEFAULT_Y = TOTAL_HEIGHT - ROW_HEIGHT;
+const HIDDEN_Y = TOTAL_HEIGHT;
+
 export const MOBILE_NAV_HEIGHT = ROW_HEIGHT + PILL_HEIGHT;
 
 export function MobileNavTabs() {
@@ -90,44 +99,48 @@ export function MobileNavTabs() {
     <div key={idx} style={navTabStyle} />
   ));
 
-  const totalHeight = ROW_HEIGHT * COLUMN_COUNT;
-  const openY = 0;
-  const closeY = totalHeight - ROW_HEIGHT;
-  const hiddenY = totalHeight;
-
-  const [{ y }, api] = useSpring(() => ({ y: totalHeight }));
-
-  const open = ({ canceled }) => {
-    // when cancel is true, it means that the user passed the upwards threshold
-    // so we change the spring config to create a nice wobbly effect
-    api.start({
-      y: openY,
-      immediate: false,
-      config: canceled ? config.wobbly : config.stiff,
-    });
-  };
+  const [{ y }, api] = useSpring(() => ({ y: OPEN_DEFAULT_Y }));
 
-  const close = (velocity = 0) => {
-    api.start({
-      y: closeY,
-      immediate: false,
-      config: { ...config.stiff, velocity },
-    });
-  };
+  const openFull = useCallback(
+    ({ canceled }) => {
+      // when cancel is true, it means that the user passed the upwards threshold
+      // so we change the spring config to create a nice wobbly effect
+      api.start({
+        y: OPEN_FULL_Y,
+        immediate: false,
+        config: canceled ? config.wobbly : config.stiff,
+      });
+    },
+    [api, OPEN_FULL_Y],
+  );
 
-  const hide = (velocity = 0) => {
-    api.start({
-      y: hiddenY,
-      immediate: false,
-      config: { ...config.stiff, velocity },
-    });
-  };
+  const openDefault = useCallback(
+    (velocity = 0) => {
+      api.start({
+        y: OPEN_DEFAULT_Y,
+        immediate: false,
+        config: { ...config.stiff, velocity },
+      });
+    },
+    [api, OPEN_DEFAULT_Y],
+  );
+
+  const hide = useCallback(
+    (velocity = 0) => {
+      api.start({
+        y: HIDDEN_Y,
+        immediate: false,
+        config: { ...config.stiff, velocity },
+      });
+    },
+    [api, HIDDEN_Y],
+  );
 
   useScrollListener(({ isScrolling }) => {
     if (isScrolling('down')) {
       hide();
-    } else {
-      close();
+    } else if (isScrolling('up')) {
+      openDefault();
     }
   });
 
@@ -150,9 +163,9 @@ export function MobileNavTabs() {
       // the threshold for it to close, or if we reset it to its open position
       if (last) {
         if (oy > ROW_HEIGHT * 0.5 || (vy > 0.5 && dy > 0)) {
-          close(vy);
+          openDefault(vy);
         } else {
-          open({ canceled });
+          openFull({ canceled });
         }
       } else {
         // when the user keeps dragging, we just move the sheet according to
@@ -163,7 +176,7 @@ export function MobileNavTabs() {
     {
       from: () => [0, y.get()],
       filterTaps: true,
-      bounds: { top: -totalHeight, bottom: totalHeight - ROW_HEIGHT },
+      bounds: { top: -TOTAL_HEIGHT, bottom: TOTAL_HEIGHT - ROW_HEIGHT },
       axis: 'y',
       rubberband: true,
     },
@@ -179,7 +192,7 @@ export function MobileNavTabs() {
         backgroundColor: theme.mobileNavBackground,
         borderTop: `1px solid ${theme.menuBorder}`,
         ...styles.shadow,
-        height: totalHeight + PILL_HEIGHT,
+        height: TOTAL_HEIGHT + PILL_HEIGHT,
         width: '100%',
         position: 'fixed',
         zIndex: 100,
@@ -203,7 +216,7 @@ export function MobileNavTabs() {
           style={{
             flexDirection: 'row',
             flexWrap: 'wrap',
-            height: totalHeight,
+            height: TOTAL_HEIGHT,
             width: '100%',
           }}
         >