SONAR-10931 Fix unexpected wrapping of global nav bar

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 8ae4dbb08f9c5867352d4e1f89443014d2573476..5a7c54cd52cabff4179f2b89d5e40ab7815c1278 100644 (file)
--- 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 7d2fb58fb663284dedf67e0a0b5d3b8af9c0d5b5..81619581862a8919773efe4119ada81875c0fa48 100644 (file)
--- 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 b7d7cef1f92d97c0d1f49f0f410794d803210e0c..7c0121ca23e1919df6603256c28cf760f369e78d 100644 (file)
--- 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 25c7daaa489ea80a45839cc5fba1933c883ca119..8a7b46ff02fdb9ca54de5a42b2e556f98c814499 100644 (file)
--- 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 c1733d6b202cd9e3b2b5088a4b90ce28ed6af79d..7f6362e4750f767987e189e707b0054a107687c6 100644 (file)
--- 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 6eb526f021fc7aa96d9c9a70f7b498354cca4b81..b886f31dab472c22b6b21d4cfe1208fbe08d067b 100644 (file)
--- 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