From 850f4ba9ab14ca73d06c6d5f50540e862e0a2a9e Mon Sep 17 00:00:00 2001
From: NotNite <hi@notnite.com>
Date: Tue, 2 May 2023 12:14:25 -0400
Subject: [PATCH] hacky emergency mobile support

---
 src/app/me/AboutMe.module.css     | 19 ++++++++++++++++++-
 src/components/AvatarChanger.tsx  |  2 +-
 src/components/Connection.tsx     | 10 ++++++----
 src/components/icons/UserIcon.tsx |  3 ++-
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/app/me/AboutMe.module.css b/src/app/me/AboutMe.module.css
index 35c2ba9..7aa7400 100644
--- a/src/app/me/AboutMe.module.css
+++ b/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;
+  }
+}
diff --git a/src/components/AvatarChanger.tsx b/src/components/AvatarChanger.tsx
index 0c2d74a..2b268da 100644
--- a/src/components/AvatarChanger.tsx
+++ b/src/components/AvatarChanger.tsx
@@ -41,7 +41,7 @@ export default function AvatarChanger({
           alt="Your avatar"
         />
       ) : (
-        <UserIcon />
+        <UserIcon className={styles.currentAvatar} />
       )}
 
       <button
diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index bc60b21..5ceb444 100644
--- a/src/components/Connection.tsx
+++ b/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>}
diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx
index 44f56ce..67ac60e 100644
--- a/src/components/icons/UserIcon.tsx
+++ b/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>