Mobile popup improvement

site/src/app/roadmap/MobilePopup.scss

@@ -9,7 +9,8 @@
   flex-direction: column;
   flex-shrink: 0;
   overflow: auto;
-  border-radius: 8px 8px 0 0;
+  overscroll-behavior: contain;
+  border-radius: 16px 16px 0 0;
 
   // prevents child element z index escaping (i.e. any child of this element
   // may not appear above any element outside of the .program-requirements element)

site/src/app/roadmap/MobilePopup.tsx

@@ -16,6 +16,42 @@ const MobilePopup: FC<MobilePopupProps> = ({ show, onClose, className, id, child
   const isMobile = useIsMobile();
   const overlayRef = useRef<HTMLDivElement>(null);
   const popupRef = useRef<HTMLDivElement>(null);
+  const touchStartY = useRef(0);
+
+  useEffect(() => {
+    const element = popupRef.current;
+    if (!element) return;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      touchStartY.current = e.touches[0].clientY;
+      element.style.transition = 'none';
+    };
+
+    const handleTouchEnd = (e: TouchEvent) => {
+      if (e.changedTouches[0].clientY - touchStartY.current > 100) {
+        onClose();
+      }
+      element.style.transform = '';
+      element.style.transition = '';
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      const delta = e.touches[0].clientY - touchStartY.current;
+      if (delta > 0) {
+        element.style.transform = `translateY(${delta}px)`;
+      }
+    };
+
+    element.addEventListener('touchstart', handleTouchStart);
+    element.addEventListener('touchend', handleTouchEnd);
+    element.addEventListener('touchmove', handleTouchMove);
+
+    return () => {
+      element.removeEventListener('touchstart', handleTouchStart);
+      element.removeEventListener('touchend', handleTouchEnd);
+      element.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, [show, onClose]);
 
   useEffect(() => {
     if (!isMobile) return;

site/src/globals.scss

@@ -46,7 +46,7 @@ $mui-transition-time: 268ms;
   width: 100%;
   bottom: 0;
   z-index: $zIndex;
-  max-height: calc(100% - 40px);
+  max-height: calc(100% - 53px);
   padding-bottom: 56px;
   transform: translateY(100%);
   transition: transform 0.3s;