diff --git a/src/pages/friends/Friend.module.scss b/src/pages/friends/Friend.module.scss
index c455ef87..bc311948 100644
--- a/src/pages/friends/Friend.module.scss
+++ b/src/pages/friends/Friend.module.scss
@@ -1,3 +1,9 @@
+.title {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
 .actions {
     display: flex;
     align-items: center;
@@ -18,6 +24,12 @@
         padding: 5px 0;
         z-index: 10;
         cursor: pointer;
+
+        .title {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+        }
         
         svg {
             margin-inline-end: 4px;
diff --git a/src/pages/friends/Friends.tsx b/src/pages/friends/Friends.tsx
index 444afadf..7ccf4761 100644
--- a/src/pages/friends/Friends.tsx
+++ b/src/pages/friends/Friends.tsx
@@ -116,7 +116,9 @@ export default function Friends() {
                                 <summary>
                                     <Overline className={styles.overline} type="subtle">
                                         <ChevronDown size={20} />
-                                        <Text id={i18n} /> — { list.length }
+                                        <div className={styles.title}>
+                                            <Text id={i18n} /> — { list.length }
+                                        </div>
                                     </Overline>
                                 </summary>
                                 { list.map(x => <Friend key={x._id} user={x} />) }