Merge pull request #1475 from kianamcc/SWC-7170

SWC-7170: SRC UserCard updates on mobile
Sage-Bionetworks · Jan 2, 2025 · e16b324 · e16b324
2 parents 11bff75 + 2d7f94a
commit e16b324
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 2 deletions.
diff --git a/packages/synapse-react-client/src/components/UserCard/Avatar.tsx b/packages/synapse-react-client/src/components/UserCard/Avatar.tsx
@@ -3,7 +3,7 @@ import { getColor } from '../../utils/functions/getUserData'
 import { UserProfile } from '@sage-bionetworks/synapse-types'
 import UserCardMedium from './UserCardMedium'
 import { useOverlay } from '../../utils/hooks'
-import { Avatar as MUIAvatar, Skeleton, SxProps } from '@mui/material'
+import { Avatar as MUIAvatar, Skeleton, SxProps, useTheme } from '@mui/material'
 
 const TIMER_DELAY_SHOW = 250 // milliseconds
 const TIMER_DELAY_HIDE = 500
@@ -28,6 +28,7 @@ export function Avatar({
   className,
 }: AvatarProps) {
   const target = useRef(null)
+  const theme = useTheme()
 
   const mediumUserCard = (
     <UserCardMedium userProfile={userProfile} imageURL={imageURL} />
@@ -62,6 +63,11 @@ export function Avatar({
         fontSize: '26px',
         width: '80px',
         height: '80px',
+        [theme.breakpoints.down('sm')]: {
+          fontSize: '21px',
+          width: '45px',
+          height: '45px',
+        },
       }
       break
     default:

diff --git a/packages/synapse-react-client/src/components/UserCard/UserCardMedium.tsx b/packages/synapse-react-client/src/components/UserCard/UserCardMedium.tsx
@@ -243,7 +243,20 @@ export function UserCardMedium({
 
   if (!isLarge) {
     return (
-      <Card className={`SRC-userCard SRC-userCardMediumUp`}>{mediumCard}</Card>
+      <Card
+        className={`SRC-userCard SRC-userCardMediumUp`}
+        sx={theme => ({
+          [theme.breakpoints.down('sm')]: {
+            '&.SRC-userCard': {
+              minWidth: 'unset',
+              padding: '0 16px',
+              width: '100%',
+            },
+          },
+        })}
+      >
+        {mediumCard}
+      </Card>
     )
   }
   // else return medium card inside large component

diff --git a/packages/synapse-react-client/src/style/base/_core.scss b/packages/synapse-react-client/src/style/base/_core.scss
@@ -442,6 +442,7 @@ a.SRC-whiteText {
 }
 @media (max-width: 555px) {
   .SRC-grid-item {
+    width: 100%;
     flex-basis: 100%;
   }
 }