StackedRouter: increase swipe to back area

src/UnexpectedError.tsx

@@ -42,6 +42,29 @@ const UnexpectedError: Component<{ error?: any }> = (props) => {
         calc(var(--safe-area-inset-bottom) + 20px)
         calc(var(--safe-area-inset-left) + 20px);
     }
+
+    details {
+      max-width: 100vw;
+      max-width: 100dvw;
+      overflow: auto;
+
+      & * {
+        user-select: all;
+      }
+
+
+      summary {
+        position: sticky;
+        left: 0;
+        top: 0;
+        user-select: none;
+      }
+    }
+
+    .actions {
+      margin-top: 20px;
+      margin-bottom: 20px;
+    }
   `;
 
   return (
@@ -52,8 +75,11 @@ const UnexpectedError: Component<{ error?: any }> = (props) => {
         You can restart the app to see if this guy is gone. If you meet this guy
         repeatly, please report to us.
       </p>
-      <div>
+      <div class="actions">
-        <Button onClick={() => (window.location.replace("/"))}>
+        <Button
+          onClick={() => window.location.replace("/")}
+          variant="contained"
+        >
           Restart App
         </Button>
       </div>
@@ -61,7 +87,10 @@ const UnexpectedError: Component<{ error?: any }> = (props) => {
         <summary>
           {errorMsg.loading ? "Generating " : " "}Technical Infomation
         </summary>
-        <pre>{errorMsg()}</pre>
+        <pre>
+          On: {window.location.href} <br />
+          {errorMsg()}
+        </pre>
       </details>
     </main>
   );

src/platform/StackedRouter.tsx

@@ -294,8 +294,9 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
   };
 
   let reenterableAnimation: Animation | undefined;
-  let origX = 0,
+  let origWidth = 0,
-    origWidth = 0;
+    origFigX = 0,
+    origFigY = 0;
 
   const resetAnimation = () => {
     reenterableAnimation = undefined;
@@ -307,23 +308,25 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
     if (event.touches.length !== 1) {
       return;
     }
-    const [fig0] = event.touches;
-    const { x, width } = event.currentTarget.getBoundingClientRect();
-    if (fig0.clientX < x - 22 || fig0.clientX > x + 22) {
-      return;
-    }
-    origX = x;
-    origWidth = width;
-
-    event.preventDefault();
     event.stopPropagation();
 
-    const lastFr = stack[stack.length - 1];
+    const [fig0] = event.touches;
-    const createAnimation = lastFr.animateClose ?? animateClose;
+    const { width } = event.currentTarget.getBoundingClientRect();
-    reenterableAnimation = createAnimation(event.currentTarget);
+    origWidth = width;
-    reenterableAnimation.pause();
+    origFigX = fig0.clientX;
-    reenterableAnimation.addEventListener("finish", resetAnimation);
+    origFigY = fig0.clientY;
-    reenterableAnimation.addEventListener("cancel", resetAnimation);
+
+    if (
+      fig0.clientX < -22 ||
+      fig0.clientX > 22 ||
+      fig0.clientX < window.innerWidth - 22 ||
+      fig0.clientX > window.innerWidth + 22
+    ) {
+      return;
+    }
+    // Prevent the default swipe to back/forward on iOS
+
+    event.preventDefault();
   };
 
   const onDialogTouchMove = (
@@ -336,13 +339,25 @@ const StackedRouter: Component<StackedRouterProps> = (oprops) => {
       }
     }
 
-    if (!reenterableAnimation) return;
+    const [fig0] = event.touches;
+
+    const ofsX = fig0.clientX - origFigX;
+
+    if (!reenterableAnimation) {
+      if (!(ofsX > 22) || !(Math.abs(fig0.clientY - origFigY) < 44)) {
+        return;
+      }
+      const lastFr = stack[stack.length - 1];
+      const createAnimation = lastFr.animateClose ?? animateClose;
+      reenterableAnimation = createAnimation(event.currentTarget);
+      reenterableAnimation.pause();
+      reenterableAnimation.addEventListener("finish", resetAnimation);
+      reenterableAnimation.addEventListener("cancel", resetAnimation);
+    }
 
     event.preventDefault();
     event.stopPropagation();
 
-    const [fig0] = event.touches;
-    const ofsX = fig0.clientX - origX;
     const pc = ofsX / origWidth / window.devicePixelRatio;
 
     const { activeDuration, delay } =