hacky emergency mobile support

src/app/me/AboutMe.module.css

@@ -1,5 +1,5 @@
 .content {
-  width: min-content;
+  width: min(100vw, min-content);
   margin: 2rem auto;
 }
 
@@ -7,6 +7,7 @@
   display: grid;
   grid-template-columns: 300px 1fr;
   column-gap: 2rem;
+  max-width: 100vw;
 }
 
 .profileTower *:first-child {
@@ -71,3 +72,19 @@
   width: 100%;
   margin: 1rem 0;
 }
+
+/* stack if we're out of space */
+@media (max-width: 800px) {
+  .profileGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .profileGrid > * {
+    max-width: 100vw;
+  }
+
+  .rightGrid {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/components/AvatarChanger.tsx

@@ -41,7 +41,7 @@ export default function AvatarChanger({
           alt="Your avatar"
         />
       ) : (
-        <UserIcon />
+        <UserIcon className={styles.currentAvatar} />
       )}
 
       <button

src/components/Connection.tsx

@@ -32,12 +32,12 @@ export default function Connection({
     }
   };
 
-  const mouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const down = (e: React.MouseEvent | React.TouchEvent) => {
     e.preventDefault();
     interval.current = setTimeout(execute, holdTime);
   };
 
-  const mouseUp = (e: React.MouseEvent<HTMLButtonElement>) => {
+  const up = (e: React.MouseEvent | React.TouchEvent) => {
     e.preventDefault();
     if (interval.current) clearTimeout(interval.current);
   };
@@ -51,8 +51,10 @@ export default function Connection({
         !authState?.connected ? styles.disconnected : styles.progress
       )}
       disabled={unavailable}
-      onMouseDown={mouseDown}
-      onMouseUp={mouseUp}
+      onMouseDown={down}
+      onMouseUp={up}
+      onTouchStart={down}
+      onTouchEnd={up}
     >
       <div className={styles.iconContainer}>
         {icon ? icon() : <span className={styles.dot}></span>}

src/components/icons/UserIcon.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 
-export default function UserIcon() {
+export default function UserIcon(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
       viewBox="0 0 128 128"
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
+      {...props}
     >
       <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
         <circle fill="currentColor" cx="64" cy="48" r="32"></circle>