From f61202c6e0bafb6c7085ae72f8b6fcfff8775934 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Fri, 21 Apr 2023 09:41:28 -0400
Subject: [PATCH 1/3] Fix z-index positioning of Group Grid item

---
 .../groups/components/discover/group-grid-item.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx
index fd1168f4e..4380053d3 100644
--- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx
+++ b/app/soapbox/features/groups/components/discover/group-grid-item.tsx
@@ -39,7 +39,11 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
             />
           )}
 
-          <Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
+          <div
+            className='absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-gray-900 to-transparent pb-8 pt-12 transition-opacity duration-500'
+          />
+
+          <Stack justifyContent='end' className='p-4 text-white' space={3}>
             <GroupAvatar
               group={group}
               size={44}
@@ -60,10 +64,6 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
               </HStack>
             </Stack>
           </Stack>
-
-          <div
-            className='absolute inset-x-0 bottom-0 z-0 flex justify-center rounded-b-lg bg-gradient-to-t from-gray-900 to-transparent pb-8 pt-12 transition-opacity duration-500'
-          />
         </Stack>
       </Link>
 

From 63ca6554d19620fc2fb4634ea502bfcf1691d640 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Fri, 21 Apr 2023 09:46:19 -0400
Subject: [PATCH 2/3] Improve spacing between GroupGridItem

---
 .../features/groups/components/discover/group-grid-item.tsx     | 2 +-
 .../features/groups/components/discover/popular-groups.tsx      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/groups/components/discover/group-grid-item.tsx b/app/soapbox/features/groups/components/discover/group-grid-item.tsx
index 4380053d3..da8f7542c 100644
--- a/app/soapbox/features/groups/components/discover/group-grid-item.tsx
+++ b/app/soapbox/features/groups/components/discover/group-grid-item.tsx
@@ -20,7 +20,7 @@ const GroupGridItem = forwardRef((props: IGroup, ref: React.ForwardedRef<HTMLDiv
   return (
     <div
       key={group.id}
-      className='relative flex shrink-0 flex-col space-y-2 px-0.5'
+      className='relative flex shrink-0 flex-col space-y-2 px-1'
       style={{
         width,
       }}
diff --git a/app/soapbox/features/groups/components/discover/popular-groups.tsx b/app/soapbox/features/groups/components/discover/popular-groups.tsx
index 8dcf607e7..6395ea3b0 100644
--- a/app/soapbox/features/groups/components/discover/popular-groups.tsx
+++ b/app/soapbox/features/groups/components/discover/popular-groups.tsx
@@ -53,7 +53,7 @@ const PopularGroups = () => {
               {isFetching ? (
                 new Array(4).fill(0).map((_, idx) => (
                   <div
-                    className='relative flex shrink-0 flex-col space-y-2 px-0.5'
+                    className='relative flex shrink-0 flex-col space-y-2 px-1'
                     style={{ width: width || 'auto' }}
                     key={idx}
                   >

From e5f7fe244c22478d9e2704b056c43d3b67072b4d Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Fri, 21 Apr 2023 10:11:34 -0400
Subject: [PATCH 3/3] Grid spacing improvements

---
 .../groups/components/discover/search/results.tsx      | 10 ++++------
 app/soapbox/features/groups/popular.tsx                | 10 ++++------
 app/soapbox/features/groups/suggested.tsx              | 10 ++++------
 app/soapbox/features/groups/tag.tsx                    | 10 ++++------
 4 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/app/soapbox/features/groups/components/discover/search/results.tsx b/app/soapbox/features/groups/components/discover/search/results.tsx
index 9df350375..2543f6ebc 100644
--- a/app/soapbox/features/groups/components/discover/search/results.tsx
+++ b/app/soapbox/features/groups/components/discover/search/results.tsx
@@ -46,10 +46,8 @@ export default (props: Props) => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
-    <div className='pb-4'>
-      <GroupGridItem group={group} />
-    </div>
+  const renderGroupGrid = useCallback((group: Group) => (
+    <GroupGridItem group={group} />
   ), []);
 
   return (
@@ -79,10 +77,10 @@ export default (props: Props) => {
         <VirtuosoGrid
           useWindowScroll
           data={groups}
-          itemContent={(index, group) => renderGroupGrid(group, index)}
+          itemContent={(_index, group) => renderGroupGrid(group)}
           components={{
             Item: (props) => (
-              <div {...props} className='w-1/2 flex-none' />
+              <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
             ),
             List: GridList,
           }}
diff --git a/app/soapbox/features/groups/popular.tsx b/app/soapbox/features/groups/popular.tsx
index 7f2d43a64..c2c11148c 100644
--- a/app/soapbox/features/groups/popular.tsx
+++ b/app/soapbox/features/groups/popular.tsx
@@ -46,10 +46,8 @@ const Popular: React.FC = () => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
-    <div className='pb-4'>
-      <GroupGridItem group={group} />
-    </div>
+  const renderGroupGrid = useCallback((group: Group) => (
+    <GroupGridItem group={group} />
   ), []);
 
   return (
@@ -73,10 +71,10 @@ const Popular: React.FC = () => {
         <VirtuosoGrid
           useWindowScroll
           data={groups}
-          itemContent={(index, group) => renderGroupGrid(group, index)}
+          itemContent={(_index, group) => renderGroupGrid(group)}
           components={{
             Item: (props) => (
-              <div {...props} className='w-1/2 flex-none' />
+              <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
             ),
             List: GridList,
           }}
diff --git a/app/soapbox/features/groups/suggested.tsx b/app/soapbox/features/groups/suggested.tsx
index 5c52f678b..4d1843598 100644
--- a/app/soapbox/features/groups/suggested.tsx
+++ b/app/soapbox/features/groups/suggested.tsx
@@ -46,10 +46,8 @@ const Suggested: React.FC = () => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
-    <div className='pb-4'>
-      <GroupGridItem group={group} />
-    </div>
+  const renderGroupGrid = useCallback((group: Group) => (
+    <GroupGridItem group={group} />
   ), []);
 
   return (
@@ -73,10 +71,10 @@ const Suggested: React.FC = () => {
         <VirtuosoGrid
           useWindowScroll
           data={groups}
-          itemContent={(index, group) => renderGroupGrid(group, index)}
+          itemContent={(_index, group) => renderGroupGrid(group)}
           components={{
             Item: (props) => (
-              <div {...props} className='w-1/2 flex-none' />
+              <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
             ),
             List: GridList,
           }}
diff --git a/app/soapbox/features/groups/tag.tsx b/app/soapbox/features/groups/tag.tsx
index 4774a4700..8b18053d3 100644
--- a/app/soapbox/features/groups/tag.tsx
+++ b/app/soapbox/features/groups/tag.tsx
@@ -50,10 +50,8 @@ const Tag: React.FC<ITag> = (props) => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
-    <div className='pb-4'>
-      <GroupGridItem group={group} />
-    </div>
+  const renderGroupGrid = useCallback((group: Group) => (
+    <GroupGridItem group={group} />
   ), []);
 
   if (isLoading || !tag) {
@@ -100,10 +98,10 @@ const Tag: React.FC<ITag> = (props) => {
         <VirtuosoGrid
           useWindowScroll
           data={groups}
-          itemContent={(index, group) => renderGroupGrid(group, index)}
+          itemContent={(_index, group) => renderGroupGrid(group)}
           components={{
             Item: (props) => (
-              <div {...props} className='w-1/2 flex-none' />
+              <div {...props} className='w-1/2 flex-none pb-4 [&:nth-last-of-type(-n+2)]:pb-0' />
             ),
             List: GridList,
           }}