Make details fit on one line, make group a link

web/components/contract/contract-details.tsx

@@ -5,7 +5,6 @@ import {
   TrendingUpIcon,
   UserGroupIcon,
 } from '@heroicons/react/outline'
-import Router from 'next/router'
 import clsx from 'clsx'
 import { Editor } from '@tiptap/react'
 import dayjs from 'dayjs'
@@ -162,13 +161,32 @@ export function ContractDetails(props: {
   const { width } = useWindowSize()
   const isMobile = (width ?? 0) < 600
 
-  const groupInfo = (
+  const groupInfo = groupToDisplay ? (
-    <Row>
+    <Row
-      <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
+      className={clsx(
-      <span className="truncate">
+        'items-center pr-2',
-        {groupToDisplay ? groupToDisplay.name : 'No group'}
+        isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
-      </span>
+      )}
+    >
+      <SiteLink href={groupPath(groupToDisplay.slug)} className={'truncate'}>
+        <Row>
+          <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
+          <span className="items-center truncate">{groupToDisplay.name}</span>
+        </Row>
+      </SiteLink>
     </Row>
+  ) : (
+    <Button
+      size={'xs'}
+      className={'max-w-[200px] pr-2'}
+      color={'gray-white'}
+      onClick={() => !groupToDisplay && setOpen(true)}
+    >
+      <Row>
+        <UserGroupIcon className="mx-1 inline h-5 w-5 shrink-0" />
+        <span className="truncate">No Group</span>
+      </Row>
+    </Button>
   )
 
   return (
@@ -199,19 +217,8 @@ export function ContractDetails(props: {
           <div />
         ) : (
           <Row>
-            <Button
+            {groupInfo}
-              size={'xs'}
+            {user && groupToDisplay && (
-              className={'max-w-[200px] pr-2'}
-              color={'gray-white'}
-              onClick={() =>
-                groupToDisplay
-                  ? Router.push(groupPath(groupToDisplay.slug))
-                  : setOpen(!open)
-              }
-            >
-              {groupInfo}
-            </Button>
-            {user && (
               <Button
                 size={'xs'}
                 color={'gray-white'}

web/components/user-link.tsx

@@ -9,14 +9,14 @@ import { formatMoney } from 'common/util/format'
 
 function shortenName(name: string) {
   const firstName = name.split(' ')[0]
-  const maxLength = 10
+  const maxLength = 11
   const shortName =
-    firstName.length >= 4
+    firstName.length >= 3 && name.length > maxLength
       ? firstName.length < maxLength
         ? firstName
         : firstName.substring(0, maxLength - 3) + '...'
       : name.length > maxLength
-      ? name.substring(0, maxLength) + '...'
+      ? name.substring(0, maxLength - 3) + '...'
       : name
   return shortName
 }