SONAR-10481 Fix bad display of organization navigation bar

4 files changed, 30 insertions, 23 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
index 6b87dcbcb6e..2362ba94a4e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
+++ b/server/sonar-web/src/main/js/app/components/nav/component/ComponentNav.css
@@ -17,10 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-.navbar-context-justified {
-  display: flex;
-  justify-content: space-between;
-}
 
 .navbar-context-branches {
   display: inline-flex;
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.tsx b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.tsx
index bbcca4c8768..636dc6cf0a1 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.tsx
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/OrganizationNavigation.tsx
@@ -33,9 +33,11 @@ interface Props {
 
 export default function OrganizationNavigation({ organization, location }: Props) {
   return (
-    <ContextNavBar id="context-navigation" height={theme.contextNavHeightRaw}>
-      <OrganizationNavigationHeaderContainer organization={organization} />
-      <OrganizationNavigationMeta organization={organization} />
+    <ContextNavBar height={theme.contextNavHeightRaw} id="context-navigation">
+      <div className="navbar-context-justified">
+        <OrganizationNavigationHeaderContainer organization={organization} />
+        <OrganizationNavigationMeta organization={organization} />
+      </div>
       <OrganizationNavigationMenu location={location} organization={organization} />
     </ContextNavBar>
   );
diff --git a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap
index 07512698807..58a0d30113b 100644
--- a/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/organizations/navigation/__tests__/__snapshots__/OrganizationNavigation-test.tsx.snap
@@ -5,24 +5,28 @@ exports[`render 1`] = `
   height={72}
   id="context-navigation"
 >
-  <Connect(OrganizationNavigationHeader)
-    organization={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-        "projectVisibility": "public",
+  <div
+    className="navbar-context-justified"
+  >
+    <Connect(OrganizationNavigationHeader)
+      organization={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+          "projectVisibility": "public",
+        }
       }
-    }
-  />
-  <Connect(OrganizationNavigationMeta)
-    organization={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-        "projectVisibility": "public",
+    />
+    <Connect(OrganizationNavigationMeta)
+      organization={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+          "projectVisibility": "public",
+        }
       }
-    }
-  />
+    />
+  </div>
   <OrganizationNavigationMenu
     location={
       Object {
diff --git a/server/sonar-web/src/main/js/components/nav/ContextNavBar.css b/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
index 8c9ff6a53bb..f4116968f6b 100644
--- a/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
+++ b/server/sonar-web/src/main/js/components/nav/ContextNavBar.css
@@ -32,6 +32,11 @@
   border-bottom: none;
 }
 
+.navbar-context-justified {
+  display: flex;
+  justify-content: space-between;
+}
+
 /* use `min-width: 0` to cut breadcrumb links (to end with "...") */
 /* https://stackoverflow.com/questions/38223879/white-space-nowrap-breaks-flexbox-layout */
 .navbar-context-header {