SONAR-8515 Align boxes on the About page

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 e95674f2c6b58bd60965c5e5fb7d0e46db5fbae6..542056a1329c4532ae5f033043e4c5071e033092 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
+++ b/server/sonar-web/src/main/js/apps/about/components/AboutApp.js
@@ -128,21 +128,21 @@ class AboutApp extends React.Component {
                 <div className="about-page-section" dangerouslySetInnerHTML={{ __html: customText }}/>
             )}
 
-            <div className="columns">
-              <div className="column-two-thirds">
+            <div className="flex-columns">
+              <div className="flex-column flex-column-two-thirds about-page-group-boxes">
                 <AboutCleanCode/>
                 <AboutLeakPeriod/>
               </div>
-              <div className="column-third">
+              <div className="flex-column flex-column-third about-page-group-boxes">
                 <AboutIssues/>
               </div>
             </div>
 
-            <div className="columns">
-              <div className="column-half">
+            <div className="flex-columns">
+              <div className="flex-column flex-column-half about-page-group-boxes">
                 <AboutQualityGates/>
               </div>
-              <div className="column-half">
+              <div className="flex-column flex-column-half about-page-group-boxes">
                 <AboutStandards/>
               </div>
             </div>

diff --git a/server/sonar-web/src/main/js/apps/about/styles.css b/server/sonar-web/src/main/js/apps/about/styles.css
index 46cd9c9375f11d57d80eae818952eacd08f6a793..a3aba28b9b7073863a8404c399a7a7d3ff2b5e34 100644 (file)
--- a/server/sonar-web/src/main/js/apps/about/styles.css
+++ b/server/sonar-web/src/main/js/apps/about/styles.css
@@ -199,3 +199,12 @@
   width: 310px;
   margin-top: 40px;
 }
+
+.about-page-group-boxes {
+  display: flex;
+  flex-direction: column;
+}
+
+.about-page-group-boxes > .boxed-group {
+  flex-grow: 1;
+}