From 0dd7d426365603a7ba7f49aed5e984a625e96e89 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Sat, 28 Dec 2024 21:14:14 +0100
Subject: [PATCH] Make email and full name grow over username and roles

---
 .../user_profile/user_profile.tsx             | 80 ++++++++++---------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx b/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
index aa66c80953929..00ad9916ce995 100644
--- a/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
+++ b/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { EuiFlexItemProps } from '@elastic/eui';
 import {
   EuiBadge,
   EuiBadgeGroup,
@@ -764,6 +765,7 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
         />
       ),
       testSubj: 'username',
+      grow: 1 as EuiFlexItemProps['grow'],
     },
   ];
 
@@ -783,6 +785,7 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
         />
       ),
       testSubj: 'full_name',
+      grow: 2,
     });
 
     rightSideItems.push({
@@ -800,6 +803,7 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
         />
       ),
       testSubj: 'email',
+      grow: 3,
     });
   }
 
@@ -822,6 +826,7 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
       />
     ),
     testSubj: 'userRoles',
+    grow: 2,
   });
 
   return (
@@ -854,44 +859,45 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
                   </EuiTitle>
                 </EuiPageHeaderSection>
                 <EuiPageHeaderSection>
-                  <EuiFlexGroup alignItems="flexStart" css={rightSideItemsCSS}>
+                  <EuiFlexGroup alignItems="center" css={rightSideItemsCSS}>
                     {rightSideItems.map((item) => (
-                      <EuiDescriptionList
-                        key={item.testSubj}
-                        textStyle="reverse"
-                        css={rightSideItemCSS}
-                        listItems={[
-                          {
-                            title: (
-                              <EuiText color={euiTheme.colors.darkestShade} size="s">
-                                <EuiFlexGroup
-                                  responsive={false}
-                                  alignItems="center"
-                                  gutterSize="none"
-                                >
-                                  <EuiFlexItem grow={false}>{item.title}</EuiFlexItem>
-                                  <EuiFlexItem grow={false}>
-                                    <EuiIconTip type="questionInCircle" content={item.helpText} />
-                                  </EuiFlexItem>
-                                </EuiFlexGroup>
-                              </EuiText>
-                            ),
-                            description: (
-                              <span data-test-subj={item.testSubj}>
-                                {item.description || (
-                                  <EuiText color={euiTheme.colors.textDisabled} size="s">
-                                    <FormattedMessage
-                                      id="xpack.security.accountManagement.userProfile.noneProvided"
-                                      defaultMessage="None provided"
-                                    />
-                                  </EuiText>
-                                )}
-                              </span>
-                            ),
-                          },
-                        ]}
-                        compressed
-                      />
+                      <EuiFlexItem key={item.testSubj} grow={item.grow}>
+                        <EuiDescriptionList
+                          textStyle="reverse"
+                          css={rightSideItemCSS}
+                          listItems={[
+                            {
+                              title: (
+                                <EuiText color={euiTheme.colors.darkestShade} size="s">
+                                  <EuiFlexGroup
+                                    responsive={false}
+                                    alignItems="center"
+                                    gutterSize="none"
+                                  >
+                                    <EuiFlexItem grow={false}>{item.title}</EuiFlexItem>
+                                    <EuiFlexItem grow={false}>
+                                      <EuiIconTip type="questionInCircle" content={item.helpText} />
+                                    </EuiFlexItem>
+                                  </EuiFlexGroup>
+                                </EuiText>
+                              ),
+                              description: (
+                                <span data-test-subj={item.testSubj}>
+                                  {item.description || (
+                                    <EuiText color={euiTheme.colors.textDisabled} size="s">
+                                      <FormattedMessage
+                                        id="xpack.security.accountManagement.userProfile.noneProvided"
+                                        defaultMessage="None provided"
+                                      />
+                                    </EuiText>
+                                  )}
+                                </span>
+                              ),
+                            },
+                          ]}
+                          compressed
+                        />
+                      </EuiFlexItem>
                     ))}
                   </EuiFlexGroup>
                 </EuiPageHeaderSection>