ui: fix overflow for long usernames (pinterest#1173)

* ui: fix overflow for long usernames * also fixed it for query execution invite
arrowtail-precision · Jan 3, 2024 · 6fcacf7 · 6fcacf7
1 parent c5424f6
commit 6fcacf7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git a/querybook/webapp/components/QueryExecutionAccessList/QueryExecutionAccessList.scss b/querybook/webapp/components/QueryExecutionAccessList/QueryExecutionAccessList.scss
@@ -42,5 +42,10 @@
             align-items: center;
             text-align: right;
         }
+
+        .user-badge-wrapper,
+        .user-badge-wrapper .UserBadge-names {
+            overflow: hidden;
+        }
     }
 }
diff --git a/querybook/webapp/components/UserBadge/UserBadge.tsx b/querybook/webapp/components/UserBadge/UserBadge.tsx
@@ -84,7 +84,11 @@ export const UserBadge: React.FunctionComponent<IProps> = ({
                 >
                     <UserNameComponent userInfo={userInfo} loading={loading} />
                 </AccentText>
-                <AccentText className="handle" size="small" color="light">
+                <AccentText
+                    className="handle one-line-ellipsis"
+                    size="small"
+                    color="light"
+                >
                     @{userName} {deletedText}
                 </AccentText>
             </div>

diff --git a/querybook/webapp/components/UserSelect/UserSelect.tsx b/querybook/webapp/components/UserSelect/UserSelect.tsx
@@ -99,7 +99,7 @@ const UserSelectOptionRow: React.FC<{ user: IUserSearchResultRow }> = ({
     return (
         <div className="flex-row">
             <UserAvatar tiny uid={user.id} />
-            <span className="ml4">{name}</span>
+            <span className="ml4 one-line-ellipsis">{name}</span>
         </div>
     );
 };
diff --git a/querybook/webapp/ui/ViewersList/ViewersList.scss b/querybook/webapp/ui/ViewersList/ViewersList.scss
@@ -41,5 +41,10 @@
             align-items: center;
             text-align: right;
         }
+
+        .user-badge-wrapper,
+        .user-badge-wrapper .UserBadge-names {
+            overflow: hidden;
+        }
     }
 }