fix(style): team unlock badge

GZTimeWalker · Apr 9, 2024 · e3a6974 · e3a6974
1 parent 75c9cfc
commit e3a6974
Showing 1 changed file with 11 additions and 7 deletions.
diff --git a/src/GZCTF/ClientApp/src/pages/admin/Teams.tsx b/src/GZCTF/ClientApp/src/pages/admin/Teams.tsx
@@ -201,7 +201,7 @@ const Teams: FC = () => {
           <Table className={classes.table}>
             <thead>
               <tr>
-                <th style={{ width: '23rem' }}>{t('common.label.team')}</th>
+                <th style={{ width: '35vw', minWidth: '400px' }}>{t('common.label.team')}</th>
                 <th>{t('admin.label.teams.members')}</th>
                 <th>{t('admin.label.teams.bio')}</th>
                 <th />
@@ -218,26 +218,30 @@ const Teams: FC = () => {
                   return (
                     <tr key={team.id}>
                       <td>
-                        <Group position="apart" spacing={0}>
-                          <Group position="left">
+                        <Group position="apart" spacing={0} noWrap>
+                          <Group position="left" noWrap w="calc(100% - 6rem)">
                             <Avatar alt="avatar" src={team.avatar} radius="xl">
                               {team.name?.slice(0, 1)}
                             </Avatar>
                             <Input
                               variant="unstyled"
                               value={team.name ?? 'team'}
                               readOnly
-                              sx={() => ({
+                              styles={{
+                                wrapper: {
+                                  flexGrow: 1,
+                                  width: 'calc(100% - 2rem)',
+                                },
                                 input: {
                                   userSelect: 'none',
                                   fontWeight: 'bold',
-                                  width: '14rem',
+                                  width: '100%',
                                 },
-                              })}
+                              }}
                             />
                           </Group>
 
-                          <Badge size="sm" color={team.locked ? 'yellow' : 'gray'}>
+                          <Badge p={0} size="md" color={team.locked ? 'yellow' : 'gray'}>
                             {team.locked
                               ? t('admin.content.teams.locked')
                               : t('admin.content.teams.unlocked')}