fix(portrait): prevent portrait from collapsing on smaller screens

portrait container now has a min-with, which prevents collapse on smaller screen sizes.
A max-width has also been added when an src path is passed to prevent image widths
significantly bypassing the new min-width

fix #7140

src/components/portrait/portrait.component.tsx

@@ -84,6 +84,7 @@ const Portrait = ({
   ...rest
 }: PortraitProps) => {
   const [externalError, setExternalError] = useState(false);
+  const hasValidImg = Boolean(src) && !externalError;
 
   invariant(
     !(src && gravatar),
@@ -165,6 +166,7 @@ const Portrait = ({
             {...filterStyledSystemMarginProps(rest)}
             onClick={onClick}
             {...tagProps}
+            hasValidImg={hasValidImg}
             darkBackground={darkBackground}
             size={size}
             shape={shape}
@@ -180,6 +182,7 @@ const Portrait = ({
         {...filterStyledSystemMarginProps(rest)}
         onClick={onClick}
         {...tagProps}
+        hasValidImg={hasValidImg}
         darkBackground={darkBackground}
         size={size}
         shape={shape}

src/components/portrait/portrait.stories.tsx

@@ -59,10 +59,26 @@ WithTooltip.storyName = "With Tooltip";
 
 export const Sizes: Story = () => {
   return (
-    <Box display="flex" alignItems="baseline">
-      {(["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).map((size) => (
-        <Portrait key={size} size={size} />
-      ))}
+    <Box display="flex" flexDirection="column">
+      <Box display="flex" alignItems="center">
+        {(["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).map((size) => (
+          <Portrait key={size} size={size} />
+        ))}
+      </Box>
+      <Box display="flex" alignItems="center" mt={2}>
+        {(["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).map((size) => (
+          <Portrait key={size} size={size} initials="MK" />
+        ))}
+      </Box>
+      <Box display="flex" alignItems="center" mt={2}>
+        {(["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).map((size) => (
+          <Portrait
+            key={size}
+            size={size}
+            src="https://avataaars.io/?avatarStyle=Transparent&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"
+          />
+        ))}
+      </Box>
     </Box>
   );
 };

src/components/portrait/portrait.style.tsx

@@ -12,6 +12,7 @@ type StyledPortraitProps = {
   darkBackground?: boolean;
   size: PortraitSizes;
   shape?: PortraitShapes;
+  hasValidImg?: boolean;
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
 };
 
@@ -30,12 +31,11 @@ export const StyledPortraitInitials = styled.div<
 
 export const StyledPortraitGravatar = styled.img`
   height: inherit;
-  width: inherit;
 `;
 
 export const StyledCustomImg = styled.img`
   height: inherit;
-  width: inherit;
+  min-width: inherit;
 `;
 
 // && is used here to increase the specificity
@@ -44,7 +44,7 @@ export const StyledIcon = styled(Icon)<Pick<StyledPortraitProps, "size">>`
   && {
     color: inherit;
     height: inherit;
-    width: inherit;
+    min-width: inherit;
 
     ::before {
       font-size: ${({ size }) => PORTRAIT_SIZE_PARAMS[size].iconDimensions}px;
@@ -63,13 +63,16 @@ export const StyledPortraitContainer = styled.div<
     darkBackground
       ? "var(--colorsUtilityYin090)"
       : "var(--colorsUtilityReadOnly400)"};
-  width: ${({ size }) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
+  ${({ hasValidImg, size }) =>
+    hasValidImg && `max-width: ${PORTRAIT_SIZE_PARAMS[size].dimensions}px;`}
+  min-width: ${({ size }) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
   height: ${({ size }) => PORTRAIT_SIZE_PARAMS[size].dimensions}px;
   overflow: hidden;
   border-radius: ${({ shape }) =>
     shape === "square" ? "0px" : "var(--borderRadiusCircle)"};
   border: 1px solid var(--colorsUtilityReadOnly600);
   display: inline-block;
+
   ${({ onClick }) => onClick && "cursor: pointer"}
   ${margin}
 `;