UnexpectedError: adjust visual, add selectable

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>
-        <Button onClick={() => (window.location.replace("/"))}>
+      <div class="actions">
+        <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>
   );