Fix two-finger pan while drawing & Added panel resizing surface on mobile devices.

CHANGELOG.md

@@ -4,6 +4,8 @@ Recent changes to the geojson.io application. Entries are grouped by ship date.
 
 ## 2026-06-25
 
+- **Fix 2 finger pan while in drawing mode:** Fix for users on touch devices, now 2 finger gestures while drawing is in process will make it to the map and will allow for panning.
+- **Mobile Panel Resizing:** On Mobile devices the bottom panel now presents clickable surface for resizing.
 - **Streamlined file import:** Files with unambiguous formats (GeoJSON, KML, GPX, shapefiles, etc.) now import directly without showing a dialog. The import modal only appears when user input is needed (CSV, XLS, coordinate strings). Drag-and-drop and the Import button now share identical logic, and `fitBounds` works correctly after drag-and-drop imports.
 
 ## 2026-06-24

app/components/legend.tsx

@@ -48,19 +48,6 @@ function LegendTitle({ title }: { title: string }) {
   );
 }
 
-function LegendContainer({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      className="space-y-1 text-xs
-      bg-white dark:bg-gray-900
-      dark:text-white
-      border border-gray-300 dark:border-black w-48 rounded-t"
-    >
-      {children}
-    </div>
-  );
-}
-
 function LegendRamp({ symbolization }: { symbolization: ISymbolizationRamp }) {
   return (
     <>
@@ -176,14 +163,14 @@ function getRoundNum(num: number) {
     d >= 10
       ? 10
       : d >= 5
-      ? 5
-      : d >= 3
-      ? 3
-      : d >= 2
-      ? 2
-      : d >= 1
-      ? 1
-      : getDecimalRoundNum(d);
+        ? 5
+        : d >= 3
+          ? 3
+          : d >= 2
+            ? 2
+            : d >= 1
+              ? 1
+              : getDecimalRoundNum(d);
 
   return pow10 * d;
 }
@@ -321,9 +308,9 @@ export function Legend() {
     .exhaustive();
 
   return (
-    <div className="space-y-1 absolute bottom-0 right-10 w-48">
+    <div className="space-y-1 absolute bottom-1 right-10 w-48">
       <ScaleControl />
-      <LegendContainer>{legend}</LegendContainer>
+      {legend}
     </div>
   );
 }

app/components/resizer.tsx

@@ -262,7 +262,7 @@ export const BottomResizer = memo(function BottomResizerInner() {
         flex items-center
         justify-center
         h-1
-        hover-none:w-3
+        hover-none:h-3
         z-max
         bg-opacity-0
         dark:bg-opacity-0
@@ -279,8 +279,8 @@ export const BottomResizer = memo(function BottomResizerInner() {
       <div
         className="
         hover-hover:hidden
-        h-16
-        w-1
+        w-16
+        h-1
         rounded
         bg-white"
       />

app/lib/handlers/line.ts

@@ -31,6 +31,7 @@ export function useLineHandlers({
   const transact = rep.useTransact();
   const popMoment = usePopMoment();
   const usingTouchEvents = useRef<boolean>(false);
+  const isMultiTouch = useRef<boolean>(false);
   const shiftHeld = useShiftHeld();
   const altHeld = useAltHeld();
 
@@ -146,14 +147,24 @@ export function useLineHandlers({
 
     touchstart: (e) => {
       usingTouchEvents.current = true;
+      if (e.originalEvent.touches.length > 1) {
+        isMultiTouch.current = true;
+        return;
+      }
+      isMultiTouch.current = false;
       e.preventDefault();
     },
 
     touchmove: (e) => {
+      if (e.originalEvent.touches.length > 1 || isMultiTouch.current) return;
       handlers.move(e);
     },
 
     touchend: (e) => {
+      if (isMultiTouch.current) {
+        if (e.originalEvent.touches.length === 0) isMultiTouch.current = false;
+        return;
+      }
       handlers.click(e);
     },
 

app/lib/handlers/polygon.ts

@@ -37,6 +37,7 @@ export function usePolygonHandlers({
    * Workarounds for Apple Pencil (same as in line drawing)
    */
   const usingTouchEvents = useRef<boolean>(false);
+  const isMultiTouch = useRef<boolean>(false);
 
   const shiftHeld = useShiftHeld();
   const altHeld = useAltHeld();
@@ -201,19 +202,27 @@ export function usePolygonHandlers({
 
     touchstart: (e) => {
       usingTouchEvents.current = true;
+      if (e.originalEvent.touches.length > 1) {
+        isMultiTouch.current = true;
+        return;
+      }
+      isMultiTouch.current = false;
       e.preventDefault();
     },
 
     touchmove: (e) => {
+      if (e.originalEvent.touches.length > 1 || isMultiTouch.current) return;
       e.preventDefault();
-      // If this is a Pencil, allow moving. If it
-      // is a finger, do not.
       if (e.originalEvent?.touches[0]?.force) {
         handlers.move(e);
       }
     },
 
     touchend: (e) => {
+      if (isMultiTouch.current) {
+        if (e.originalEvent.touches.length === 0) isMultiTouch.current = false;
+        return;
+      }
       handlers.click(e);
     },
     up() {