welcome-page: adjust padding

Change-Id: I07a39b3d00c748f595babf354cde1dd0155443fb

client/src/components/EllipsisMiddle.tsx

@@ -21,15 +21,16 @@ import Box from '@mui/material/Box'
 interface EllipsisMiddleProps {
   text: string
   centerItem?: boolean
+  padding?: string
 }
-const EllipsisMiddle = ({ text, centerItem }: EllipsisMiddleProps) => {
+const EllipsisMiddle = ({ text, centerItem, padding }: EllipsisMiddleProps) => {
   if (!text) {
     console.error('text is undefined')
     return
   }
 
   if (text.length < 12) {
-    return <span>{text}</span>
+    return <span style={{ padding: padding }}>{text}</span>
   }
 
   const startFixedChars = 5

client/src/components/WelcomePage.tsx

@@ -190,16 +190,16 @@ export default function WelcomePage() {
               sx={{
                 ...middleBoxStyle,
                 maxWidth: isMedium ? '220px' : 'unset',
-                width: displayedInfo === account.getRegisteredName() ? 'auto' : '400px',
+                width: 'auto',
               }}
               borderRadius={'5px 2px 2px 5px'}
             >
               <JamiIdIcon sx={{ marginBottom: '-4px', marginRight: '5px' }} />
-              <Box maxWidth={isMedium ? '170px' : 'unset'}>
-                <EllipsisMiddle text={displayedInfo} centerItem={true} />
+              <Box maxWidth={isMedium ? '170px' : 'unset'} sx={{ mb: '2px' }}>
+                <EllipsisMiddle text={displayedInfo} centerItem={true} padding="6px" />
               </Box>
             </Box>
-            <Box sx={{ ...middleBoxStyle, gap: '8px', width: '50px' }} borderRadius={'2px 5px 5px 2px'} width={'6%'}>
+            <Box sx={{ ...middleBoxStyle, gap: '8px', width: '65px' }} borderRadius={'2px 5px 5px 2px'} width={'6%'}>
               <Tooltip title={t('copy_to_clipboard')}>
                 <span style={{ width: '20px', height: '20px' }}>
                   <TwoSheetsIcon