Don't auotfocus on mobile

web/components/groups/group-chat.tsx

@@ -47,6 +47,13 @@ export function GroupChat(props: {
   const router = useRouter()
   const isMember = user && group.memberIds.includes(user?.id)
 
+  const { width, height } = useWindowSize()
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
+  // Subtract bottom bar when it's showing (less than lg screen)
+  const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
+  const remainingHeight =
+    (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
+
   useMemo(() => {
     // Group messages with createdTime within 2 minutes of each other.
     const tempMessages = []
@@ -86,8 +93,9 @@ export function GroupChat(props: {
   }, [messages, router.asPath])
 
   useEffect(() => {
-    if (inputRef) inputRef.focus()
+    // is mobile?
-  }, [inputRef])
+    if (inputRef && width && width > 720) inputRef.focus()
+  }, [inputRef, width])
 
   function onReplyClick(comment: Comment) {
     setReplyToUsername(comment.userUsername)
@@ -107,13 +115,6 @@ export function GroupChat(props: {
     inputRef?.focus()
   }
 
-  const { width, height } = useWindowSize()
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
-  // Subtract bottom bar when it's showing (less than lg screen)
-  const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
-  const remainingHeight =
-    (height ?? 0) - (containerRef?.offsetTop ?? 0) - bottomBarHeight
-
   return (
     <Col ref={setContainerRef} style={{ height: remainingHeight }}>
       <Col