SONAR-9583 Use fixed width layout for navigation

3 files changed, 53 insertions, 55 deletions

diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
index f22509ca1d5..715543e99a4 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -132,67 +132,65 @@ class AboutApp extends React.PureComponent {
     }
 
     return (
-      <div id="about-page" className="about-page">
-        <div className="about-page-container">
-          <div className="about-page-entry">
-            <div className="about-page-intro">
-              <h1 className="big-spacer-bottom">
-                {translate('layout.sonar.slogan')}
-              </h1>
-              {!this.props.currentUser.isLoggedIn &&
-                <Link to="/sessions/new" className="button button-active big-spacer-right">
-                  {translate('layout.login')}
-                </Link>}
-              <a
-                className="button"
-                href="https://redirect.sonarsource.com/doc/home.html"
-                target="_blank">
-                {translate('about_page.read_documentation')}
-              </a>
-            </div>
-
-            <div className="about-page-instance">
-              <AboutProjects count={projectsCount} loading={loading} />
-              <EntryIssueTypes
-                bugs={bugs}
-                codeSmells={codeSmells}
-                loading={loading}
-                vulnerabilities={vulnerabilities}
-              />
-            </div>
+      <div id="about-page" className="page page-limited about-page">
+        <div className="about-page-entry">
+          <div className="about-page-intro">
+            <h1 className="big-spacer-bottom">
+              {translate('layout.sonar.slogan')}
+            </h1>
+            {!this.props.currentUser.isLoggedIn &&
+              <Link to="/sessions/new" className="button button-active big-spacer-right">
+                {translate('layout.login')}
+              </Link>}
+            <a
+              className="button"
+              href="https://redirect.sonarsource.com/doc/home.html"
+              target="_blank">
+              {translate('about_page.read_documentation')}
+            </a>
           </div>
 
-          {customText != null &&
-            customText.value &&
-            <div
-              className="about-page-section"
-              dangerouslySetInnerHTML={{ __html: customText.value }}
-            />}
+          <div className="about-page-instance">
+            <AboutProjects count={projectsCount} loading={loading} />
+            <EntryIssueTypes
+              bugs={bugs}
+              codeSmells={codeSmells}
+              loading={loading}
+              vulnerabilities={vulnerabilities}
+            />
+          </div>
+        </div>
 
-          <AboutLanguages />
+        {customText != null &&
+          customText.value &&
+          <div
+            className="about-page-section"
+            dangerouslySetInnerHTML={{ __html: customText.value }}
+          />}
 
-          <AboutQualityModel />
+        <AboutLanguages />
 
-          <div className="flex-columns">
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutCleanCode />
-            </div>
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutLeakPeriod />
-            </div>
-          </div>
+        <AboutQualityModel />
 
-          <div className="flex-columns">
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutQualityGates />
-            </div>
-            <div className="flex-column flex-column-half about-page-group-boxes">
-              <AboutStandards appState={this.props.appState} />
-            </div>
+        <div className="flex-columns">
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutCleanCode />
+          </div>
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutLeakPeriod />
           </div>
+        </div>
 
-          <AboutScanners />
+        <div className="flex-columns">
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutQualityGates />
+          </div>
+          <div className="flex-column flex-column-half about-page-group-boxes">
+            <AboutStandards appState={this.props.appState} />
+          </div>
         </div>
+
+        <AboutScanners />
       </div>
     );
   }
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
index 2e9eee74ed4..80041d540bb 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutAppForSonarQubeDotCom.js
@@ -51,7 +51,7 @@ export default function AboutAppForSonarQubeDotCom(props: Props) {
   return (
     <div id="about-page" className="about-page sqcom-about-page">
       <div className="sqcom-about-page-entry">
-        <div className="about-page-container">
+        <div className="page-limited">
           <div className="sqcom-about-page-intro">
             <h1 className="big-spacer-bottom">
               Continuous Code Quality<br />as a Service
@@ -73,7 +73,7 @@ export default function AboutAppForSonarQubeDotCom(props: Props) {
 
       <AboutRulesForSonarQubeDotCom appState={props.appState} />
 
-      <div className="about-page-container">
+      <div className="page-limited">
         {customText != null &&
           customText.value &&
           <div
diff --git a/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js b/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js
index 5add8a0eab1..3496a27e3d3 100644
--- a/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutRulesForSonarQubeDotCom.js
@@ -34,7 +34,7 @@ export default function AboutRulesForSonarQubeDotCom(props: Props) {
 
   return (
     <div className="sqcom-about-rules">
-      <div className="about-page-container">
+      <div className="page-limited">
         <Link to={getRulesUrl(null, organization)} className="sqcom-about-rules-link">
           +3,000 rules
           <span className="spacer-left">