Fix text overflow issues in list item component (#38954)

app/javascript/mastodon/components/account_list_item/index.tsx

@@ -90,7 +90,7 @@ export const AccountListItem: React.FC<Props> = ({
         <ListItemLink
           to={`/@${account.acct}`}
           data-hover-card-account={accountId}
-          subtitle={handle}
+          subtitle={<span className={classes.handle}>{handle}</span>}
         >
           <DisplayNameSimple
             account={account}

app/javascript/mastodon/components/account_list_item/styles.module.scss

@@ -24,6 +24,13 @@
   vertical-align: -4px;
 }
 
+.handle {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .button {
   align-self: start;
 }

app/javascript/mastodon/components/list_item/index.tsx

@@ -30,7 +30,7 @@ export const ListItemWrapper: React.FC<WrapperProps> = ({
   return (
     <div {...otherProps} className={classNames(classes.wrapper, className)}>
       {icon}
-      <div>{children}</div>
+      <div className={classes.main}>{children}</div>
       {sideContent && (
         <span className={classes.sideContent}>{sideContent}</span>
       )}

app/javascript/mastodon/components/list_item/styles.module.scss

@@ -14,6 +14,11 @@
   color: var(--color-text-primary);
 }
 
+.main {
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
 .title {
   font-weight: 500;