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 97a9bb9c2a27eea083301b4693a0528fb317fdc7..921d893c8f876959537eea33148dab26b825de05 100644 (file)
--- 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 2e8a86dc8b434cd4573f91e81ec6451809aa3943..566c79cc44efa0deff52350823dd331b89d35bd8 100644 (file)
--- 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 500bb56e0b00b241c8bf04c32ce5a30d8808c197..d724590a1ddd63d5b838ff4118ca63cbdcdce374 100644 (file)
--- 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 897a9ae03e783b253a125307257b2f4fa2d051ea..e02248ef739c32732ea8f4fc89415d5241e6be7c 100644 (file)
--- 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 69d689e6df08b581fb4e27e8f166dbe0f602e410..b0a0f304706780ccbe055f419ee26bd6eb31c81d 100644 (file)
--- 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 {