fix: user list overflow

GZTimeWalker · Sep 10, 2022 · 1a03601 · 1a03601
1 parent ce0ed9d
commit 1a03601
Showing 1 changed file with 10 additions and 4 deletions.
diff --git a/GZCTF/ClientApp/src/pages/admin/Users.tsx b/GZCTF/ClientApp/src/pages/admin/Users.tsx
@@ -240,18 +240,24 @@ const Users: FC = () => {
                       />
                     </td>
                     <td>
-                      <Group position="apart">
-                        <Group position="left">
+                      <Group noWrap position="apart" spacing="xs">
+                        <Group noWrap position="left">
                           <Avatar src={user.avatar} radius="xl" />
-                          <Text weight={500}>{user.userName}</Text>
+                          <Text weight={500} lineClamp={1}>
+                            {user.userName}
+                          </Text>
                         </Group>
                         <Badge size="sm" color={RoleColorMap.get(user.role ?? Role.User)}>
                           {user.role}
                         </Badge>
                       </Group>
                     </td>
                     <td>
-                      <Text size="sm" style={{ fontFamily: theme.fontFamilyMonospace }}>
+                      <Text
+                        size="sm"
+                        style={{ fontFamily: theme.fontFamilyMonospace }}
+                        lineClamp={1}
+                      >
                         {user.email}
                       </Text>
                     </td>