From 63d8e6739b7884e7ec4616e3bb7d108d401b4bf0 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
Date: Fri, 22 Jul 2022 13:53:19 -0600
Subject: [PATCH] Add title, mobile flex

---
 web/components/groups/contract-groups-list.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/web/components/groups/contract-groups-list.tsx b/web/components/groups/contract-groups-list.tsx
index b52179b1..7fab42d8 100644
--- a/web/components/groups/contract-groups-list.tsx
+++ b/web/components/groups/contract-groups-list.tsx
@@ -12,6 +12,7 @@ import {
 } from 'web/lib/firebase/groups'
 import { User } from 'common/user'
 import { Contract } from 'common/contract'
+import { SiteLink } from 'web/components/site-link'
 
 export function ContractGroupsList(props: {
   groups: Group[]
@@ -22,20 +23,25 @@ export function ContractGroupsList(props: {
 
   return (
     <Col className={'gap-2'}>
+      <span className={'text-xl text-indigo-700'}>
+        <SiteLink href={'/groups/'}>Groups</SiteLink>
+      </span>
       {user && (
-        <Row className={'ml-2 items-center justify-between'}>
-          <span>Add to group: </span>
+        <Col className={'ml-2 items-center justify-between sm:flex-row'}>
+          <span>Add to: </span>
           <GroupSelector
             options={{
               showSelector: true,
               showLabel: false,
               ignoreGroupIds: groups.map((g) => g.id),
             }}
-            setSelectedGroup={(group) => addContractToGroup(group, contract)}
+            setSelectedGroup={(group) =>
+              group && addContractToGroup(group, contract)
+            }
             selectedGroup={undefined}
             creator={user}
           />
-        </Row>
+        </Col>
       )}
       {groups.length === 0 && (
         <Col className="ml-2 h-full justify-center text-gray-500">