Add pencil to edit group on contract page

web/components/contract/contract-details.tsx

@@ -188,9 +188,10 @@ export function ContractDetails(props: {
         ) : !groupToDisplay && !user ? (
           <div />
         ) : (
+          <Row>
             <Button
               size={'xs'}
-            className={'max-w-[200px]'}
+              className={'max-w-[200px] pr-1'}
               color={'gray-white'}
               onClick={() =>
                 groupToDisplay
@@ -200,6 +201,15 @@ export function ContractDetails(props: {
             >
               {groupInfo}
             </Button>
+            <Button
+              size={'xs'}
+              className={'!px-2'}
+              color={'gray-white'}
+              onClick={() => setOpen(!open)}
+            >
+              <PencilIcon className="inline h-5 w-5 shrink-0" />
+            </Button>
+          </Row>
         )}
       </Row>
       <Modal open={open} setOpen={setOpen} size={'md'}>