From 6aabad9df3b689e9e5ced6db2578e5bab34f47b4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 2 May 2023 12:47:16 -0500
Subject: [PATCH] List: prevent long content overflow

---
 app/soapbox/components/list.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index e1b8cdcd9..b56e0e6a7 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -56,8 +56,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
 
   return (
     <Comp
-      className={clsx({
-        'flex items-center justify-between px-4 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 dark:from-gradient-start/10 dark:to-gradient-end/10': true,
+      className={clsx('flex items-center justify-between overflow-hidden bg-gradient-to-r from-gradient-start/20 to-gradient-end/20 px-4 py-2 first:rounded-t-lg last:rounded-b-lg dark:from-gradient-start/10 dark:to-gradient-end/10', {
         'cursor-pointer hover:from-gradient-start/30 hover:to-gradient-end/30 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
       })}
       {...linkProps}
@@ -71,7 +70,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
       </div>
 
       {onClick ? (
-        <HStack space={1} alignItems='center' className='text-gray-700 dark:text-gray-600'>
+        <HStack space={1} alignItems='center' className='overflow-hidden text-gray-700 dark:text-gray-600'>
           {children}
 
           <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1 rtl:rotate-180' />