From b71333921bb571b4023adc33ba75a900d7c094fe Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Fri, 8 May 2026 10:34:55 +0200
Subject: [PATCH] Fix text overflow issues in list item component (#38954)

---
 .../mastodon/components/account_list_item/index.tsx        | 2 +-
 .../components/account_list_item/styles.module.scss        | 7 +++++++
 app/javascript/mastodon/components/list_item/index.tsx     | 2 +-
 .../mastodon/components/list_item/styles.module.scss       | 5 +++++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/components/account_list_item/index.tsx b/app/javascript/mastodon/components/account_list_item/index.tsx
index 04817cb33e..d6da056c8c 100644
--- a/app/javascript/mastodon/components/account_list_item/index.tsx
+++ b/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}
diff --git a/app/javascript/mastodon/components/account_list_item/styles.module.scss b/app/javascript/mastodon/components/account_list_item/styles.module.scss
index 69949508c5..6a23f2f5f1 100644
--- a/app/javascript/mastodon/components/account_list_item/styles.module.scss
+++ b/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;
 }
diff --git a/app/javascript/mastodon/components/list_item/index.tsx b/app/javascript/mastodon/components/list_item/index.tsx
index 3e8d406752..a691762b5d 100644
--- a/app/javascript/mastodon/components/list_item/index.tsx
+++ b/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>
       )}
diff --git a/app/javascript/mastodon/components/list_item/styles.module.scss b/app/javascript/mastodon/components/list_item/styles.module.scss
index 8a90234f93..26840e6738 100644
--- a/app/javascript/mastodon/components/list_item/styles.module.scss
+++ b/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;