diff --git a/app/assets/javascripts/components/shared/ModalDialog.tsx b/app/assets/javascripts/components/shared/ModalDialog.tsx
index e2a46a27a..f465bf88f 100644
--- a/app/assets/javascripts/components/shared/ModalDialog.tsx
+++ b/app/assets/javascripts/components/shared/ModalDialog.tsx
@@ -31,7 +31,7 @@ export const ModalDialogLabel: FunctionComponent<{
   closeDialog: () => void;
   className?: string;
 }> = ({ children, closeDialog, className }) => (
-  <AlertDialogLabel className={className}>
+  <AlertDialogLabel className={`sk-panel-header px-4.5 ${className}`}>
     <div className="w-full flex flex-row justify-between items-center">
       <div className="flex-grow color-text text-base font-medium">
         {children}
diff --git a/app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx b/app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx
index 10e787053..18d28d29f 100644
--- a/app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx
+++ b/app/assets/javascripts/preferences/panes/account/changeEmail/index.tsx
@@ -154,10 +154,7 @@ export const ChangeEmail: FunctionalComponent<Props> = ({
   return (
     <div>
       <ModalDialog>
-        <ModalDialogLabel
-          closeDialog={handleDialogClose}
-          className="sk-panel-header px-4.5"
-        >
+        <ModalDialogLabel closeDialog={handleDialogClose}>
           Change Email
         </ModalDialogLabel>
         <ModalDialogDescription className="px-4.5">