fix(small-class): avatar user name overflow (#575)

netless-io · Apr 23, 2021 · e7c150b · e7c150b
1 parent ac10a44
commit e7c150b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/SmallClassAvatar.less b/desktop/renderer-app/src/pages/SmallClassPage/SmallClassAvatar.less
@@ -117,6 +117,11 @@
 }
 
 .small-class-avatar-title {
+    width: 50%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    white-space: nowrap;
     position: absolute;
     z-index: 20;
     bottom: 4px;

diff --git a/desktop/renderer-app/src/pages/SmallClassPage/SmallClassAvatar.tsx b/desktop/renderer-app/src/pages/SmallClassPage/SmallClassAvatar.tsx
@@ -32,7 +32,9 @@ export const SmallClassAvatar = observer<SmallClassAvatarProps>(function SmallCl
                                 </div>
                             )}
                             <div className="small-class-avatar-ctrl-layer">
-                                <h1 className="small-class-avatar-title">{avatarUser.name}</h1>
+                                <h1 className="small-class-avatar-title" title={avatarUser.name}>
+                                    {avatarUser.name}
+                                </h1>
                                 {ctrlBtns}
                             </div>
                         </section>