chore: improve author box rendering

Author: drodil

plugins/qeta-react/src/components/AuthorBox/AuthorBox.tsx

@@ -1,44 +1,43 @@
 import { RelativeTimeWithTooltip } from '../RelativeTimeWithTooltip';
 import { UserLink } from '../Links';
 import { useUserInfo } from '../../hooks/useEntityAuthor';
-import { Avatar, Box, Grid, makeStyles, Typography } from '@material-ui/core';
+import { Avatar, Box, makeStyles, Typography } from '@material-ui/core';
 import { ExpertIcon } from '../Icons/ExpertIcon.tsx';
 
 const useStyles = makeStyles(
   theme => ({
     authorBox: {
       padding: theme.spacing(0, 1.5, 0, 0),
       textAlign: 'right',
-      width: 220,
-      background: theme.palette.background.paper,
-      borderRadius: theme.shape.borderRadius,
       display: 'flex',
       flexDirection: 'column',
-      justifyContent: 'flex-start',
       gap: theme.spacing(0.5),
+      marginLeft: theme.spacing(2),
+      maxWidth: '200px',
     },
-    authorRow: {
+    timeRow: {
       display: 'flex',
       alignItems: 'center',
-      width: '100%',
-      marginTop: theme.spacing(0.5),
-      marginBottom: theme.spacing(0.5),
     },
     avatar: {
-      width: theme.spacing(3),
-      height: theme.spacing(3),
-      marginRight: theme.spacing(1),
+      width: '20px',
+      height: '20px',
     },
-    authorLink: {
+    authorInfo: {
       textOverflow: 'ellipsis',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
-      fontWeight: 600,
       color: theme.palette.text.primary,
       display: 'flex',
       alignItems: 'center',
       gap: theme.spacing(0.5),
     },
+    authorLink: {
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      color: theme.palette.text.primary,
+    },
     expertIcon: {
       marginLeft: theme.spacing(0.5),
       verticalAlign: 'middle',
@@ -65,39 +64,25 @@ export const AuthorBox = (props: {
 
   return (
     <Box className={`qetaAuthorBox ${styles.authorBox}`}>
-      <Grid container alignItems="center" justifyContent="flex-end" spacing={0}>
-        <Grid item xs={12} style={{ paddingBottom: 0 }}>
-          <Typography className="qetaAuthorBoxCreated" variant="caption">
-            {label} <RelativeTimeWithTooltip value={time} />
-          </Typography>
-        </Grid>
-
-        <Grid item style={{ paddingTop: 0 }}>
-          <Avatar
-            src={user?.spec?.profile?.picture}
-            className="qetaAuthorBoxAvatar avatar"
-            alt={name}
-            variant="rounded"
-            style={{ width: '1.2em', height: '1.2em' }}
-          >
-            {initials}
-          </Avatar>
-        </Grid>
-        <Grid
-          item
-          style={{
-            paddingTop: 0,
-            textOverflow: 'ellipsis',
-            overflow: 'hidden',
-            whiteSpace: 'nowrap',
-          }}
+      <Box className={styles.timeRow}>
+        <Typography className="qetaAuthorBoxCreated" variant="caption">
+          {label} <RelativeTimeWithTooltip value={time} />
+        </Typography>
+      </Box>
+      <Box className={styles.authorInfo}>
+        <Avatar
+          src={user?.spec?.profile?.picture}
+          className={`qetaAuthorBoxAvatar ${styles.avatar}`}
+          alt={name}
+          variant="rounded"
         >
-          <Box style={{ paddingLeft: '0.3em' }}>
-            <UserLink entityRef={userEntityRef} anonymous={anonymous} />
-            {expert && <ExpertIcon />}
-          </Box>
-        </Grid>
-      </Grid>
+          {initials}
+        </Avatar>
+        <Box className={styles.authorLink}>
+          <UserLink entityRef={userEntityRef} anonymous={anonymous} />
+          {expert && <ExpertIcon className={styles.expertIcon} />}
+        </Box>
+      </Box>
     </Box>
   );
 };

plugins/qeta-react/src/components/TagsAndEntities/UserChip.tsx

@@ -43,7 +43,7 @@ export const UserTooltip = (props: {
               src={user?.spec?.profile?.picture}
               alt={name}
               variant="rounded"
-              style={{ width: '0.9em', height: '0.9em' }}
+              style={{ width: '20px', height: '20px' }}
             >
               {initials}
             </Avatar>