src/UnexpectedError.tsx

@@ -42,29 +42,6 @@ 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 (
@@ -75,11 +52,8 @@ 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 class="actions">
-        <Button
-          onClick={() => window.location.replace("/")}
-          variant="contained"
-        >
+      <div>
+        <Button onClick={() => (window.location.replace("/"))}>
           Restart App
         </Button>
       </div>
@@ -87,10 +61,7 @@ const UnexpectedError: Component<{ error?: any }> = (props) => {
         <summary>
           {errorMsg.loading ? "Generating " : " "}Technical Infomation
         </summary>
-        <pre>
-          On: {window.location.href} <br />
-          {errorMsg()}
-        </pre>
+        <pre>{errorMsg()}</pre>
       </details>
     </main>
   );

src/platform/StackedRouter.tsx

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