Fix avatar link not working on mobile

web/components/widgets/avatar.tsx

@@ -1,4 +1,4 @@
-import Router from 'next/router'
+import {useRouter} from 'next/router'
 import clsx from 'clsx'
 import {memo, MouseEvent, useEffect, useState} from 'react'
 import {UserIcon, UsersIcon} from '@heroicons/react/solid'
@@ -17,6 +17,7 @@ export const Avatar = memo(
   }) => {
     const {username, noLink, size, className, preventDefault} = props
     const [avatarUrl, setAvatarUrl] = useState(props.avatarUrl)
+    const router = useRouter()
     useEffect(() => setAvatarUrl(props.avatarUrl), [props.avatarUrl])
     const s =
       size == '2xs'
@@ -40,7 +41,7 @@ export const Avatar = memo(
           e.preventDefault()
         }
         e.stopPropagation()
-        Router.push(`/${username}`)
+        router.push(`/${username}`)
       }
     }
     const fallbackInitial = (username || 'U')[0]; // first character, not encoded string

web/pages/messages/index.tsx

@@ -96,20 +96,20 @@ export const MessageChannelRow = (props: {
 
   const isBanned = otherUsers?.length == 1 && otherUsers[0].isBannedFromPosting
   return (
-    <Link
-      className="hover:bg-canvas-0 rounded p-2 transition-colors"
-      key={channelId}
-      href={'/messages/' + channelId}
-    >
-      <Row className={'items-center gap-3 rounded-md'}>
-        <MultipleOrSingleAvatars
-          size="md"
-          spacing={numOthers === 2 ? 0.3 : 0.15}
-          startLeft={numOthers === 2 ? 2.2 : 1.2}
-          avatars={otherUsers ?? []}
-          className={numOthers > 1 ? '-ml-2' : ''}
-        />
-        <Col className={'w-full'}>
+    <Row className={'items-center gap-3 rounded-md'}>
+      <MultipleOrSingleAvatars
+        size="md"
+        spacing={numOthers === 2 ? 0.3 : 0.15}
+        startLeft={numOthers === 2 ? 2.2 : 1.2}
+        avatars={otherUsers ?? []}
+        className={numOthers > 1 ? '-ml-2' : ''}
+      />
+      <Link
+        className="hover:bg-canvas-0 rounded p-2 transition-colors w-full"
+        key={channelId}
+        href={'/messages/' + channelId}
+      >
+        <Col className={''}>
           <Row className={'items-center justify-between'}>
             <span className={'font-semibold'}>
               {otherUsers && (
@@ -150,7 +150,7 @@ export const MessageChannelRow = (props: {
             )}
           </Row>
         </Col>
-      </Row>
-    </Link>
+      </Link>
+    </Row>
   )
 }