SONAR-10931 Fix unexpected wrapping of global nav bar

6 files changed, 28 insertions, 10 deletions

diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
index 8ae4dbb08f9..5a7c54cd52c 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.css
@@ -23,6 +23,10 @@
   z-index: 421;
 }
 
+.navbar-global .navbar-limited {
+  display: flex;
+}
+
 .navbar-brand {
   display: flex;
   justify-content: center;
@@ -91,6 +95,22 @@
   border-bottom-color: #646464;
 }
 
+.global-navbar-menu-right {
+  flex: 1;
+  justify-content: flex-end;
+}
+
+.global-navbar-menu-right .navbar-search {
+  flex: 1;
+  max-width: 310px;
+}
+
+.global-navbar-menu-right .navbar-search .search-box,
+.global-navbar-menu-right .navbar-search .search-box-input {
+  min-width: 0;
+  width: 100%;
+}
+
 @media print {
   .navbar-global {
     display: none !important;
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
index 7d2fb58fb66..81619581862 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNav.tsx
@@ -59,7 +59,7 @@ export class GlobalNav extends React.PureComponent<Props> {
 
         <GlobalNavMenu {...this.props} />
 
-        <ul className="global-navbar-menu pull-right">
+        <ul className="global-navbar-menu global-navbar-menu-right">
           {isSonarCloud() && <GlobalNavExplore location={this.props.location} />}
           <EmbedDocsPopupHelper
             currentUser={this.props.currentUser}
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
index b7d7cef1f92..7c0121ca23e 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavBranding.tsx
@@ -35,11 +35,9 @@ export function GlobalNavBranding({ customLogoUrl, customLogoWidth }: StateProps
   const width = customLogoUrl ? customLogoWidth || 100 : 83;
 
   return (
-    <div className="pull-left">
-      <Link className="navbar-brand" to="/">
-        <img alt={title} height={30} src={url} title={title} width={width} />
-      </Link>
-    </div>
+    <Link className="navbar-brand" to="/">
+      <img alt={title} height={30} src={url} title={title} width={width} />
+    </Link>
   );
 }
 
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
index 25c7daaa489..8a7b46ff02f 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavMenu.tsx
@@ -178,7 +178,7 @@ export default class GlobalNavMenu extends React.PureComponent<Props> {
     const { organizationsEnabled } = this.props.appState;
 
     return (
-      <ul className="global-navbar-menu pull-left">
+      <ul className="global-navbar-menu">
         {this.renderProjects()}
         {governanceInstalled && this.renderPortfolios()}
         {this.renderIssuesLink()}
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap
index c1733d6b202..7f6362e4750 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNav-test.tsx.snap
@@ -26,7 +26,7 @@ exports[`should render for SonarCloud 1`] = `
     suggestions={Array []}
   />
   <ul
-    className="global-navbar-menu pull-right"
+    className="global-navbar-menu global-navbar-menu-right"
   >
     <GlobalNavExplore
       location={
@@ -104,7 +104,7 @@ exports[`should render for SonarQube 1`] = `
     suggestions={Array []}
   />
   <ul
-    className="global-navbar-menu pull-right"
+    className="global-navbar-menu global-navbar-menu-right"
   >
     <EmbedDocsPopupHelper
       currentUser={
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap
index 6eb526f021f..b886f31dab4 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap
+++ b/server/sonar-web/src/main/js/app/components/nav/global/__tests__/__snapshots__/GlobalNavMenu-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should show administration menu if the user has the rights 1`] = `
 <ul
-  className="global-navbar-menu pull-left"
+  className="global-navbar-menu"
 >
   <li>
     <Link