Explicitly using EuiPageHeader w/ bottomBorder appears to match width…

… of the content
elastic · Jun 24, 2022 · f6a2e39 · f6a2e39
1 parent 675cb57
commit f6a2e39
Showing 1 changed file with 45 additions and 42 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
@@ -18,6 +18,7 @@ import {
   EuiFormRow,
   EuiIcon,
   EuiIconTip,
+  EuiPageHeader,
   EuiPageTemplate,
   EuiSpacer,
   EuiText,
@@ -513,52 +514,54 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
           <EuiPageTemplate
             style={{ backgroundColor: euiTheme.colors.emptyShade }}
             className="eui-fullHeight"
-            pageHeader={{
-              bottomBorder: true,
-              pageTitle: (
-                <FormattedMessage
-                  id="xpack.security.accountManagement.userProfile.title"
-                  defaultMessage="Profile"
-                />
-              ),
-              pageTitleProps: { id: titleId },
-              rightSideItems: rightSideItems.reverse().map((item) => (
-                <EuiDescriptionList
-                  textStyle="reverse"
-                  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} style={{ marginLeft: '0.33em' }}>
-                              <EuiIconTip type="questionInCircle" content={item.helpText} />
-                            </EuiFlexItem>
-                          </EuiFlexGroup>
-                        </EuiText>
-                      ),
-                      description: (
-                        <span data-test-subj={item.testSubj}>
-                          {item.description || (
-                            <EuiText color={euiTheme.colors.disabledText} size="s">
-                              <FormattedMessage
-                                id="xpack.security.accountManagement.userProfile.noneProvided"
-                                defaultMessage="None provided"
-                              />
-                            </EuiText>
-                          )}
-                        </span>
-                      ),
-                    },
-                  ]}
-                  compressed
-                />
-              )),
-            }}
             bottomBar={formChanges.count > 0 ? <SaveChangesBottomBar /> : null}
             bottomBarProps={{ paddingSize: 'm', position: 'fixed' }}
             restrictWidth={1000}
           >
+            <EuiPageHeader
+              pageTitle={
+                <FormattedMessage
+                  id="xpack.security.accountManagement.userProfile.title"
+                  defaultMessage="Profile"
+                />
+              }
+              bottomBorder={true}
+              rightSideItems={rightSideItems.reverse().map((item) => (
+                <>
+                  <EuiDescriptionList
+                    textStyle="reverse"
+                    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} style={{ marginLeft: '0.33em' }}>
+                                <EuiIconTip type="questionInCircle" content={item.helpText} />
+                              </EuiFlexItem>
+                            </EuiFlexGroup>
+                          </EuiText>
+                        ),
+                        description: (
+                          <span data-test-subj={item.testSubj}>
+                            {item.description || (
+                              <EuiText color={euiTheme.colors.disabledText} size="s">
+                                <FormattedMessage
+                                  id="xpack.security.accountManagement.userProfile.noneProvided"
+                                  defaultMessage="None provided"
+                                />
+                              </EuiText>
+                            )}
+                          </span>
+                        ),
+                      },
+                    ]}
+                    compressed
+                  />
+                </>
+              ))}
+            />
+            <EuiSpacer />
             <Form aria-labelledby={titleId}>
               <UserDetailsEditor user={user} />
               <UserAvatarEditor user={user} formik={formik} />