Grid spacing improvements

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) => (
+  const renderGroupGrid = useCallback((group: Group) => (
-    <div className='pb-4'>
     <GroupGridItem group={group} />
-    </div>
   ), []);
 
   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,
           }}

app/soapbox/features/groups/popular.tsx

@@ -46,10 +46,8 @@ const Popular: React.FC = () => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
+  const renderGroupGrid = useCallback((group: Group) => (
-    <div className='pb-4'>
     <GroupGridItem group={group} />
-    </div>
   ), []);
 
   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,
           }}

app/soapbox/features/groups/suggested.tsx

@@ -46,10 +46,8 @@ const Suggested: React.FC = () => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
+  const renderGroupGrid = useCallback((group: Group) => (
-    <div className='pb-4'>
     <GroupGridItem group={group} />
-    </div>
   ), []);
 
   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,
           }}

app/soapbox/features/groups/tag.tsx

@@ -50,10 +50,8 @@ const Tag: React.FC<ITag> = (props) => {
     </div>
   ), []);
 
-  const renderGroupGrid = useCallback((group: Group, index: number) => (
+  const renderGroupGrid = useCallback((group: Group) => (
-    <div className='pb-4'>
     <GroupGridItem group={group} />
-    </div>
   ), []);
 
   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,
           }}