From ec006f25c4526a94c52f8c029d96b2f297b57396 Mon Sep 17 00:00:00 2001
From: ingawei <46611122+ingawei@users.noreply.github.com>
Date: Wed, 5 Oct 2022 15:19:10 -0500
Subject: [PATCH] buttons overlaying content fix (#1005)

* buttons overlaying content fix
---
 web/components/groups/group-overview-post.tsx | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/web/components/groups/group-overview-post.tsx b/web/components/groups/group-overview-post.tsx
index 73c30e40..9f9dd399 100644
--- a/web/components/groups/group-overview-post.tsx
+++ b/web/components/groups/group-overview-post.tsx
@@ -6,12 +6,13 @@ import { Spacer } from '../layout/spacer'
 import { Group } from 'common/group'
 import { deleteFieldFromGroup, updateGroup } from 'web/lib/firebase/groups'
 import PencilIcon from '@heroicons/react/solid/PencilIcon'
-import { DocumentRemoveIcon } from '@heroicons/react/solid'
+import { TrashIcon } from '@heroicons/react/solid'
 import { createPost } from 'web/lib/firebase/api'
 import { Post } from 'common/post'
 import { deletePost, updatePost } from 'web/lib/firebase/posts'
 import { useState } from 'react'
 import { usePost } from 'web/hooks/use-post'
+import { Col } from '../layout/col'
 
 export function GroupOverviewPost(props: {
   group: Group
@@ -99,35 +100,31 @@ function RichEditGroupAboutPost(props: { group: Group; post: Post | null }) {
           </p>
         </div>
       ) : (
-        <div className="relative">
-          <div className="absolute top-0 right-0 z-10 space-x-2">
+        <Col>
+          <Content content={post.content} />
+          <Row className="place-content-end">
             <Button
-              color="gray"
-              size="xs"
+              color="gray-white"
+              size="2xs"
               onClick={() => {
                 setEditing(true)
                 editor?.commands.focus('end')
               }}
             >
-              <PencilIcon className="inline h-4 w-4" />
-              Edit
+              <PencilIcon className="inline h-5 w-5" />
             </Button>
 
             <Button
-              color="gray"
-              size="xs"
+              color="gray-white"
+              size="2xs"
               onClick={() => {
                 deleteGroupAboutPost()
               }}
             >
-              <DocumentRemoveIcon className="inline h-4 w-4" />
-              Delete
+              <TrashIcon className="inline h-5 w-5" />
             </Button>
-          </div>
-
-          <Content content={post.content} />
-          <Spacer h={2} />
-        </div>
+          </Row>
+        </Col>
       )}
     </>
   )