fix: scrolling issue for active menu item

src/account-settings/AccountSettingsPage.jsx

@@ -733,7 +733,7 @@ class AccountSettingsPage extends React.Component {
             {...editableFieldProps}
           />
         </div>
-        <div className="account-section pt-3" id="social-media">
+        <div className="account-section pt-3 mb-6" id="social-media">
           <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
           </h2>
@@ -769,7 +769,8 @@ class AccountSettingsPage extends React.Component {
             {...editableFieldProps}
           />
         </div>
-        <div id="notifications" ref={this.navLinkRefs['#notifications']}>
+        <div className="border border-light-700" />
+        <div className="mt-6" id="notifications" ref={this.navLinkRefs['#notifications']}>
           <NotificationSettings />
         </div>
         <div className="account-section mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>

src/account-settings/JumpNav.jsx

@@ -26,6 +26,7 @@ const JumpNav = ({
         ]}
         className="list-unstyled"
         currentClassName="font-weight-bold"
+        offset={-64}
       >
         <li>
           <NavHashLink to="#basic-information">

src/notification-preferences/NotificationSettings.jsx

@@ -19,7 +19,6 @@ const NotificationSettings = () => {
   return (
     showPreferences && (
       <Container className="notification-preferences px-0">
-        <div className="border border-light-700 my-6" />
         <h2 className="notification-heading mb-3">
           {intl.formatMessage(messages.notificationHeading)}
         </h2>