From c8ff9db879ca4c39afd60f139422bd13ff1450a2 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Tue, 23 May 2023 12:32:55 -0400
Subject: [PATCH] Truncate group name in panels

---
 .../groups/components/discover/group-list-item.tsx        | 5 +++--
 .../placeholder/components/placeholder-group-search.tsx   | 8 +++++---
 .../features/ui/components/panels/my-groups-panel.tsx     | 2 +-
 .../ui/components/panels/suggested-groups-panel.tsx       | 2 +-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/groups/components/discover/group-list-item.tsx b/app/soapbox/features/groups/components/discover/group-list-item.tsx
index fc2aedcf5..6331d9d05 100644
--- a/app/soapbox/features/groups/components/discover/group-list-item.tsx
+++ b/app/soapbox/features/groups/components/discover/group-list-item.tsx
@@ -22,17 +22,18 @@ const GroupListItem = (props: IGroup) => {
       justifyContent='between'
       data-testid='group-list-item'
     >
-      <Link key={group.id} to={`/group/${group.slug}`}>
+      <Link key={group.id} to={`/group/${group.slug}`} className='overflow-hidden'>
         <HStack alignItems='center' space={2}>
           <GroupAvatar
             group={group}
             size={44}
           />
 
-          <Stack>
+          <Stack className='overflow-hidden'>
             <Text
               weight='bold'
               dangerouslySetInnerHTML={{ __html: group.display_name_html }}
+              truncate
             />
 
             <HStack className='text-gray-700 dark:text-gray-600' space={1} alignItems='center'>
diff --git a/app/soapbox/features/placeholder/components/placeholder-group-search.tsx b/app/soapbox/features/placeholder/components/placeholder-group-search.tsx
index b2e2dc6f8..3b3bd3870 100644
--- a/app/soapbox/features/placeholder/components/placeholder-group-search.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-group-search.tsx
@@ -4,7 +4,7 @@ import { HStack, Stack, Text } from 'soapbox/components/ui';
 
 import { generateText, randomIntFromInterval } from '../utils';
 
-export default () => {
+export default ({ withJoinAction = true }: { withJoinAction?: boolean }) => {
   const groupNameLength = randomIntFromInterval(12, 20);
 
   return (
@@ -13,7 +13,7 @@ export default () => {
       justifyContent='between'
       className='animate-pulse'
     >
-      <HStack alignItems='center' space={2}>
+      <HStack alignItems='center' space={2} className='overflow-hidden'>
         {/* Group Avatar */}
         <div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />
 
@@ -37,7 +37,9 @@ export default () => {
       </HStack>
 
       {/* Join Group Button */}
-      <div className='h-10 w-36 rounded-full bg-gray-300 dark:bg-gray-800' />
+      {withJoinAction && (
+        <div className='h-10 w-36 rounded-full bg-gray-300 dark:bg-gray-800' />
+      )}
     </HStack>
   );
 };
diff --git a/app/soapbox/features/ui/components/panels/my-groups-panel.tsx b/app/soapbox/features/ui/components/panels/my-groups-panel.tsx
index c732f5ae7..d9a95a314 100644
--- a/app/soapbox/features/ui/components/panels/my-groups-panel.tsx
+++ b/app/soapbox/features/ui/components/panels/my-groups-panel.tsx
@@ -19,7 +19,7 @@ const MyGroupsPanel = () => {
     >
       {isFetching ? (
         new Array(3).fill(0).map((_, idx) => (
-          <PlaceholderGroupSearch key={idx} />
+          <PlaceholderGroupSearch key={idx} withJoinAction={false} />
         ))
       ) : (
         groups.slice(0, 3).map((group) => (
diff --git a/app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx b/app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx
index 5ef131047..d2671bc14 100644
--- a/app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx
+++ b/app/soapbox/features/ui/components/panels/suggested-groups-panel.tsx
@@ -19,7 +19,7 @@ const SuggestedGroupsPanel = () => {
     >
       {isFetching ? (
         new Array(3).fill(0).map((_, idx) => (
-          <PlaceholderGroupSearch key={idx} />
+          <PlaceholderGroupSearch key={idx} withJoinAction={false} />
         ))
       ) : (
         groups.slice(0, 3).map((group) => (