SONAR-19027 Projects list filters are pushed out of the frame

4 files changed, 17 insertions, 23 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 1aa742133d9..423a457cece 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -47,7 +47,7 @@ export default function PageHeader(props: Props) {
 
   return (
     <div className="page-header">
-      <div className="display-flex-space-between spacer-top">
+      <div className="display-flex-center projects-header-row display-flex-space-between">
         <SearchFilterContainer onQueryChange={props.onQueryChange} query={props.query} />
         <div className="display-flex-center">
           <ProjectCreationMenu className="little-spacer-right" />
@@ -58,7 +58,7 @@ export default function PageHeader(props: Props) {
           />
         </div>
       </div>
-      <div className="big-spacer-top display-flex-space-between">
+      <div className="spacer-top projects-header-row display-flex-space-between">
         <div
           className={classNames('display-flex-center', {
             'is-loading': loading,
diff --git a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap
index 9bf2ac22202..fcc1c011ca7 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/projects/components/__tests__/__snapshots__/PageHeader-test.tsx.snap
@@ -5,7 +5,7 @@ exports[`should render correctly 1`] = `
   className="page-header"
 >
   <div
-    className="display-flex-space-between spacer-top"
+    className="display-flex-center projects-header-row display-flex-space-between"
   >
     <SearchFilterContainer
       onQueryChange={[MockFunction]}
@@ -35,7 +35,7 @@ exports[`should render correctly 1`] = `
     </div>
   </div>
   <div
-    className="big-spacer-top display-flex-space-between"
+    className="spacer-top projects-header-row display-flex-space-between"
   >
     <div
       className="display-flex-center"
@@ -80,7 +80,7 @@ exports[`should render correctly while loading 1`] = `
   className="page-header"
 >
   <div
-    className="display-flex-space-between spacer-top"
+    className="display-flex-center projects-header-row display-flex-space-between"
   >
     <SearchFilterContainer
       onQueryChange={[MockFunction]}
@@ -110,7 +110,7 @@ exports[`should render correctly while loading 1`] = `
     </div>
   </div>
   <div
-    className="big-spacer-top display-flex-space-between"
+    className="spacer-top projects-header-row display-flex-space-between"
   >
     <div
       className="display-flex-center is-loading"
diff --git a/server/sonar-web/src/main/js/apps/projects/styles.css b/server/sonar-web/src/main/js/apps/projects/styles.css
index fe36f2c0d20..5fb5f79f850 100644
--- a/server/sonar-web/src/main/js/apps/projects/styles.css
+++ b/server/sonar-web/src/main/js/apps/projects/styles.css
@@ -42,6 +42,10 @@
   height: var(--controlHeight);
 }
 
+.projects-header-row {
+  padding-top: 2px;
+}
+
 .projects-list .page-actions {
   margin-bottom: 0;
 }
diff --git a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
index 7dbd5151244..02b4ead10ab 100644
--- a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
@@ -17,7 +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.
  */
-import classNames from 'classnames';
 import { DiscreetInteractiveIcon, HomeFillIcon, HomeIcon } from 'design-system';
 import * as React from 'react';
 import { setHomePage } from '../../api/users';
@@ -71,22 +70,13 @@ export class HomePageSelect extends React.PureComponent<Props> {
 
     return (
       <Tooltip overlay={tooltip}>
-        {isDefault ? (
-          <span
-            aria-label={tooltip}
-            className={classNames('sw-inline-block', className)}
-            role="img"
-          >
-            <HomeFillIcon />
-          </span>
-        ) : (
-          <DiscreetInteractiveIcon
-            aria-label={tooltip}
-            className={className}
-            Icon={isChecked ? HomeFillIcon : HomeIcon}
-            onClick={isChecked ? this.handleReset : this.handleClick}
-          />
-        )}
+        <DiscreetInteractiveIcon
+          aria-label={tooltip}
+          className={className}
+          disabled={isDefault}
+          Icon={isChecked ? HomeFillIcon : HomeIcon}
+          onClick={isChecked ? this.handleReset : this.handleClick}
+        />
       </Tooltip>
     );
   }