Finished bug 1412

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.js

@@ -21,21 +21,33 @@ const ProfileContact = (props) => {
       {props.profile?.company?.contacts?.location && (
         <Stack direction="row">
           <LocationIcon isMyProfile={props.isMyProfile} />
-          <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2">
+          <ContactItem
+            isAdmin={props.isAdmin}
+            isMyProfile={props.isMyProfile}
+            variant="subtitle2"
+          >
             {props.profile?.company?.contacts?.location}
           </ContactItem>
         </Stack>
       )}
       <Stack direction="row">
         <MailIcon isMyProfile={props.isMyProfile} />
-        <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2">
+        <ContactItem
+          isAdmin={props.isAdmin}
+          isMyProfile={props.isMyProfile}
+          variant="subtitle2"
+        >
           {props.profile?.email}
         </ContactItem>
       </Stack>
       {props.profile?.company?.contacts?.web && (
         <Stack direction="row">
           <GlobeIcon isMyProfile={props.isMyProfile} />
-          <ContactItem isMyProfile={props.isMyProfile} variant="subtitle2">
+          <ContactItem
+            isAdmin={props.isAdmin}
+            isMyProfile={props.isMyProfile}
+            variant="subtitle2"
+          >
             {props.profile?.company?.contacts?.web}
           </ContactItem>
         </Stack>

src/components/Cards/ProfileCard/ProfileContact/ProfileContact.styled.js

@@ -23,7 +23,7 @@ export const ProfileContactContainer = styled(Grid)`
     padding-top: ${(props) => props.isAdmin && "88px"};
     padding-bottom: ${(props) => (props.isAdmin ? "1rem" : "0")};
     gap: 5px;
-    width: calc(100vw - 216px);
+    width: ${props => props.isAdmin && 'calc(100vw - 198px)'};
   }
 `;
 export const LocationIcon = styled(Location)`
@@ -55,6 +55,10 @@ export const ContactItem = styled(Typography)`
     font-size: 14px;
     bottom: 4px;
     margin-right: 0;
+    ${props => props.isAdmin && css`
+      width: calc(100vw - 218px);
+      overflow-wrap: break-word;
+    `}
   }
 `;
 export const MailIcon = styled(Mail)`

src/components/Cards/ProfileCard/ProfileMainInfo/ProfileMainInfo.styled.js

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { Grid, Typography } from "@mui/material";
 import selectedTheme from "../../../../themes";
 import { ReactComponent as Pocket } from "../../../../assets/images/svg/pocket.svg";
@@ -67,6 +67,14 @@ export const ProfileName = styled(Typography)`
   @media (max-width: 600px) {
     font-size: 18px;
     margin-bottom: 0;
+    ${props => props.isAdmin && css`
+      max-width: calc(100vw - 200px);
+      min-width: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: inline;
+    `}
   }
 `;
 export const ProfilePIBContainer = styled(Grid)`