update

src/features/user/profile/components/ContactOptions.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
+import { List } from "@material-ui/core";
 import ContactOption from "./ContactOption";
 import BusinessCenterIcon from "@material-ui/icons/BusinessCenter";
 import EmailIcon from "@material-ui/icons/Email";
@@ -80,7 +81,7 @@ const handleEmailSending = email => event => {
   event.preventDefault();
 };
 
-const ContactOptions = ({ contactOptions, userName }) => {
+const ContactOptions = ({ contactOptions, userName, profilePictureItem }) => {
   const { t } = useTranslation();
   const { copy } = useClipboard();
 
@@ -125,7 +126,7 @@ const ContactOptions = ({ contactOptions, userName }) => {
   );
 
   return (
-    <>
+    <List>
       {sorted.map((z, index) => (
         <ContactOption
           key={`contact_${index}`}
@@ -136,13 +137,15 @@ const ContactOptions = ({ contactOptions, userName }) => {
           onClick={z.onClick}
         />
       ))}
-    </>
+      {profilePictureItem && <>{profilePictureItem}</>}
+    </List>
   );
 };
 
 ContactOptions.propTypes = {
   contactOptions: PropTypes.array,
-  userName: PropTypes.object.isRequired
+  userName: PropTypes.string.isRequired,
+  profilePictureItem: PropTypes.node
 };
 
 export default ContactOptions;

src/features/user/profile/components/UserProfileCardContent.js

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import {
   Grid,
-  List,
   ListItem,
   ListItemText,
   ListItemIcon,
@@ -33,32 +32,37 @@ const UserProfileCardContent = ({ userData }) => {
       <UserProfilePicture pictureUrl={userData.profilePictureUrl} />
       <Grid container spacing={2}>
         <Grid item xs={12} sm={6}>
-          <List>
-            <ContactOptions
-              contactOptions={userData.contactOptions}
-              userName={userName}
-            />
-            {profilePictureUrl && (
-              <ListItem dense>
-                <ListItemIcon>
-                  <Tooltip title={t("Generic.Copy")}>
-                    <IconButton size="small" onClick={copy(profilePictureUrl)}>
-                      <FileCopyOutlined />
-                    </IconButton>
-                  </Tooltip>
-                </ListItemIcon>
-                <ListItemText
-                  primary={
-                    <Tooltip title={t("Generic.OpenInNewTab")}>
-                      <Link href={profilePictureUrl} target="_blank">
-                        {profilePictureUrl}
-                      </Link>
-                    </Tooltip>
-                  }
-                />
-              </ListItem>
-            )}
-          </List>
+          <ContactOptions
+            contactOptions={userData.contactOptions}
+            userName={userName}
+            profilePictureItem={
+              <>
+                {profilePictureUrl && (
+                  <ListItem dense>
+                    <ListItemIcon>
+                      <Tooltip title={t("Generic.Copy")}>
+                        <IconButton
+                          size="small"
+                          onClick={copy(profilePictureUrl)}
+                        >
+                          <FileCopyOutlined />
+                        </IconButton>
+                      </Tooltip>
+                    </ListItemIcon>
+                    <ListItemText
+                      primary={
+                        <Tooltip title={t("Generic.OpenInNewTab")}>
+                          <Link href={profilePictureUrl} target="_blank">
+                            {profilePictureUrl}
+                          </Link>
+                        </Tooltip>
+                      }
+                    />
+                  </ListItem>
+                )}
+              </>
+            }
+          />
         </Grid>
       </Grid>
     </div>