From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 29 Apr 2020 12:55:36 +0000 (+0200)
Subject: SONAR-13271 Add padding to hotspots list
X-Git-Tag: 8.4.0.35506~220
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=0f66b3f46a98438b31970b176b6b1038be37d891;p=sonarqube.git

SONAR-13271 Add padding to hotspots list
---

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 97a9bb9c2a2..921d893c8f8 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -176,6 +176,10 @@ th.hide-overflow {
   padding-top: calc(2 * var(--gridSize));
 }
 
+.big-padded-right {
+  padding-right: calc(2 * var(--gridSize));
+}
+
 .huge-padded-top {
   padding-top: 40px;
 }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
index 2e8a86dc8b4..566c79cc44e 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.css
@@ -17,6 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+.hotspot-list {
+  /* sidebar width - 16px padding-right, required so as to ignore the scrollbar */
+  width: 284px;
+}
+
 .hotspot-list-header {
   padding: calc(2 * var(--gridSize)) var(--gridSize);
 }
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
index 500bb56e0b0..d724590a1dd 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotList.tsx
@@ -107,7 +107,7 @@ export default class HotspotList extends React.Component<Props, State> {
     const { expandedCategories, groupedHotspots } = this.state;
 
     return (
-      <div className="huge-spacer-bottom">
+      <div className="huge-spacer-bottom big-padded-right hotspot-list">
         <h1 className="hotspot-list-header bordered-bottom">
           <SecurityHotspotIcon className="spacer-right" />
           {translateWithParameters(
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
index 897a9ae03e7..e02248ef739 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/__tests__/__snapshots__/HotspotList-test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`should render correctly 1`] = `
 <div
-  className="huge-spacer-bottom"
+  className="huge-spacer-bottom big-padded-right hotspot-list"
 >
   <h1
     className="hotspot-list-header bordered-bottom"
@@ -25,7 +25,7 @@ exports[`should render correctly 1`] = `
 
 exports[`should render correctly 2`] = `
 <div
-  className="huge-spacer-bottom"
+  className="huge-spacer-bottom big-padded-right hotspot-list"
 >
   <h1
     className="hotspot-list-header bordered-bottom"
@@ -47,7 +47,7 @@ exports[`should render correctly 2`] = `
 
 exports[`should render correctly when the list of hotspot is static 1`] = `
 <div
-  className="huge-spacer-bottom"
+  className="huge-spacer-bottom big-padded-right hotspot-list"
 >
   <h1
     className="hotspot-list-header bordered-bottom"
@@ -70,7 +70,7 @@ exports[`should render correctly when the list of hotspot is static 1`] = `
 
 exports[`should render correctly with hotspots: no pagination 1`] = `
 <div
-  className="huge-spacer-bottom"
+  className="huge-spacer-bottom big-padded-right hotspot-list"
 >
   <h1
     className="hotspot-list-header bordered-bottom"
@@ -337,7 +337,7 @@ exports[`should render correctly with hotspots: no pagination 1`] = `
 
 exports[`should render correctly with hotspots: pagination 1`] = `
 <div
-  className="huge-spacer-bottom"
+  className="huge-spacer-bottom big-padded-right hotspot-list"
 >
   <h1
     className="hotspot-list-header bordered-bottom"
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/styles.css b/server/sonar-web/src/main/js/apps/security-hotspots/styles.css
index 69d689e6df0..b0a0f304706 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/styles.css
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/styles.css
@@ -44,6 +44,7 @@
   border-right: 1px solid var(--barBorderColor);
   height: 100%;
   overflow-y: auto;
+  overflow-x: hidden;
 }
 
 #security_hotspots .main {