fix(portrait): add min-width to prevent portrait from collapsing

portrait container now has a min-with, which prevents collapse on smaller screen sizes

fix #7140

src/components/portrait/portrait.stories.tsx

@@ -59,10 +59,17 @@ 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="baseline">
+        {(["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).map((size) => (
+          <Portrait key={size} size={size} />
+        ))}
+      </Box>
+      <Box display="flex" alignItems="baseline" mt={2}>
+        {(["XS", "S", "M", "ML", "L", "XL", "XXL"] as const).map((size) => (
+          <Portrait key={size} size={size} initials="AT" />
+        ))}
+      </Box>
     </Box>
   );
 };

src/components/portrait/portrait.style.tsx

@@ -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,14 @@ export const StyledPortraitContainer = styled.div<
     darkBackground
       ? "var(--colorsUtilityYin090)"
       : "var(--colorsUtilityReadOnly400)"};
-  width: ${({ size }) => 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}
 `;