SONAR-10481 Fix bad display of organization navigation bar

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 6b87dcbcb6ef996de7128d2323ff01e53d443264..2362ba94a4eac6a56d8d17712be4d0edf6a76908 100644 (file)
--- 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 bbcca4c87683a200b5bf92995389e9de57c00728..636dc6cf0a15d6f81bebb35bcea85f0bde40bd6c 100644 (file)
--- 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 07512698807af418de4f15d6ac0473149ce5b8f4..58a0d30113b1e0071961b1d803b8859a74ba7a05 100644 (file)
--- 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 8c9ff6a53bb4ee9a3cd53060692b85a51139a207..f4116968f6b01d79c6cb5d4348cd6d7f89ab5a01 100644 (file)
--- 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 {