Merge branch 'group-grid-list-item-fixes' into 'tag-improvements'

Group grid list item fixes

See merge request soapbox-pub/soapbox!2459

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,
       }}
@@ -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>
 

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}
                   >

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,
           }}

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,
           }}

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,
           }}

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,
           }}