From 428d9a369200f25270080196099152570ffd410b Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Mon, 15 Aug 2022 13:49:33 -0600
Subject: [PATCH] Move avatar to below card on mobile

---
 web/components/contract/contract-card.tsx    | 27 +++++++++++++-------
 web/components/contract/contract-details.tsx | 18 ++++++++-----
 web/components/user-page.tsx                 | 17 +++++++++---
 web/pages/notifications.tsx                  |  6 ++---
 4 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index b4f20a40..c054abab 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -72,7 +72,7 @@ export function ContractCard(props: {
         className
       )}
     >
-      <Col className="group relative flex-1 gap-3 py-4 pl-6">
+      <Col className="group relative flex-1 gap-3 py-4 pb-12  pl-6">
         {onClick ? (
           <a
             className="absolute top-0 left-0 right-0 bottom-0"
@@ -100,7 +100,10 @@ export function ContractCard(props: {
             />
           </Link>
         )}
-        <AvatarDetails contract={contract} />
+        <AvatarDetails
+          contract={contract}
+          className={'hidden md:inline-flex'}
+        />
         <p
           className="break-words font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"
           style={{ /* For iOS safari */ wordBreak: 'break-word' }}
@@ -119,13 +122,19 @@ export function ContractCard(props: {
           ) : (
             <FreeResponseTopAnswer contract={contract} truncate="long" />
           ))}
-
-        <MiscDetails
-          contract={contract}
-          showHotVolume={showHotVolume}
-          showTime={showTime}
-          hideGroupLink={hideGroupLink}
-        />
+        <Row className={'absolute bottom-3 gap-2 md:gap-0'}>
+          <AvatarDetails
+            contract={contract}
+            short={true}
+            className={'block md:hidden'}
+          />
+          <MiscDetails
+            contract={contract}
+            showHotVolume={showHotVolume}
+            showTime={showTime}
+            hideGroupLink={hideGroupLink}
+          />
+        </Row>
       </Col>
       {showQuickBet ? (
         <QuickBet contract={contract} user={user} />
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 4a9d40af..71998b9d 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -34,6 +34,7 @@ import { ContractGroupsList } from 'web/components/groups/contract-groups-list'
 import { SiteLink } from 'web/components/site-link'
 import { groupPath } from 'web/lib/firebase/groups'
 import { insertContent } from '../editor/utils'
+import clsx from 'clsx'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -83,9 +84,8 @@ export function MiscDetails(props: {
       {!hideGroupLink && groupLinks && groupLinks.length > 0 && (
         <SiteLink
           href={groupPath(groupLinks[0].slug)}
-          className="line-clamp-1 text-sm text-gray-400"
+          className="truncate text-sm text-gray-400"
         >
-          <UserGroupIcon className="mx-1 mb-0.5 inline h-4 w-4 shrink-0" />
           {groupLinks[0].name}
         </SiteLink>
       )}
@@ -93,18 +93,24 @@ export function MiscDetails(props: {
   )
 }
 
-export function AvatarDetails(props: { contract: Contract }) {
-  const { contract } = props
+export function AvatarDetails(props: {
+  contract: Contract
+  className?: string
+  short?: boolean
+}) {
+  const { contract, short, className } = props
   const { creatorName, creatorUsername } = contract
 
   return (
-    <Row className="items-center gap-2 text-sm text-gray-400">
+    <Row
+      className={clsx('items-center gap-2 text-sm text-gray-400', className)}
+    >
       <Avatar
         username={creatorUsername}
         avatarUrl={contract.creatorAvatarUrl}
         size={6}
       />
-      <UserLink name={creatorName} username={creatorUsername} />
+      <UserLink name={creatorName} username={creatorUsername} short={short} />
     </Row>
   )
 }
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index 2069ef72..f412e38b 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -34,16 +34,25 @@ export function UserLink(props: {
   username: string
   showUsername?: boolean
   className?: string
-  justFirstName?: boolean
+  short?: boolean
 }) {
-  const { name, username, showUsername, className, justFirstName } = props
-
+  const { name, username, showUsername, className, short } = props
+  const firstName = name.split(' ')[0]
+  const maxLength = 10
+  const shortName =
+    firstName.length >= 3
+      ? firstName.length < maxLength
+        ? firstName
+        : firstName.substring(0, maxLength - 3) + '...'
+      : name.length > maxLength
+      ? name.substring(0, maxLength) + '...'
+      : name
   return (
     <SiteLink
       href={`/${username}`}
       className={clsx('z-10 truncate', className)}
     >
-      {justFirstName ? name.split(' ')[0] : name}
+      {short ? shortName : name}
       {showUsername && ` (@${username})`}
     </SiteLink>
   )
diff --git a/web/pages/notifications.tsx b/web/pages/notifications.tsx
index a729aca1..7d06c481 100644
--- a/web/pages/notifications.tsx
+++ b/web/pages/notifications.tsx
@@ -440,7 +440,7 @@ function IncomeNotificationItem(props: {
                     name={sourceUserName || ''}
                     username={sourceUserUsername || ''}
                     className={'mr-1 flex-shrink-0'}
-                    justFirstName={true}
+                    short={true}
                   />
                 ))}
               {getReasonForShowingIncomeNotification(false)} {' on'}
@@ -609,7 +609,7 @@ function NotificationItem(props: {
               name={sourceUserName || ''}
               username={sourceUserUsername || ''}
               className={'mr-0 flex-shrink-0'}
-              justFirstName={true}
+              short={true}
             />
             <div className={'inline-flex overflow-hidden text-ellipsis pl-1'}>
               <span className={'flex-shrink-0'}>
@@ -681,7 +681,7 @@ function NotificationItem(props: {
                     name={sourceUserName || ''}
                     username={sourceUserUsername || ''}
                     className={'relative mr-1 flex-shrink-0'}
-                    justFirstName={true}
+                    short={true}
                   />
                 )}
                 {getReasonForShowingNotification(