SONAR-21239 Fix issues scrolling

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index dbce87280d12266265b395d2e27ee793fa8ead7c..8e45ccb51d5e6615787fff2e7b82eaf80fc55b28 100644 (file)
--- a/server/sonar-web/design-system/src/theme/light.ts
+++ b/server/sonar-web/design-system/src/theme/light.ts
@@ -881,6 +881,7 @@ export const lightTheme = {
       [15, 20, 24, -4, ...COLORS.blueGrey[700], 0.1],
       [0, 8, 8, -4, ...COLORS.blueGrey[700], 0.06],
     ],
+    scrolling: [[0, 0, 8, 0, ...COLORS.blueGrey[700], 0.2]],
   },
 
   // predefined borders

diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index 8d29062fc9f5548be03a6e333c7d618f5b2962c6..1b1573006e6e89e873393b350b86d5fa089ba7c5 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -1095,7 +1095,7 @@ export class App extends React.PureComponent<Props, State> {
               className="issues-nav-bar sw-overflow-y-auto issue-filters-list"
               style={{ height: `calc((100vh - ${top}px) - 60px)` }} // 60px (footer)
             >
-              <div className="sw-w-[300px] lg:sw-w-[390px]">
+              <div className="sw-w-[300px] lg:sw-w-[390px] sw-h-full">
                 <A11ySkipTarget
                   anchor="issues_sidebar"
                   label={
@@ -1107,7 +1107,7 @@ export class App extends React.PureComponent<Props, State> {
                 />
 
                 {openIssue ? (
-                  <div>
+                  <div className="sw-h-full">
                     {warning && <div className="sw-py-4">{warning}</div>}
 
                     <SubnavigationIssuesList

diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx
index 6704f0966f0c3f27f0edc3ccf16cfaa7a593870d..c2414f6579b828dd5d4b881afa2003500a10dc23 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/IssueLocation.tsx
@@ -40,7 +40,7 @@ export default function IssueLocation(props: Props) {
   useEffect(() => {
     if (selected && node.current) {
       node.current.scrollIntoView({
-        block: 'center',
+        block: 'nearest',
         behavior: 'smooth',
       });
     }

diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx
index a4fc10973b397dbdb5edf7dff4cc0d797751bc87..535026d0c36dba658547869bb4b721db2266fbd3 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesList.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { themeBorder, themeColor } from 'design-system';
+import { themeBorder, themeColor, themeShadow } from 'design-system';
 import * as React from 'react';
 import ListFooter from '../../../components/controls/ListFooter';
 import { Issue, Paging } from '../../../types/types';
@@ -54,7 +54,7 @@ export default function SubnavigationIssuesList(props: Props) {
   return (
     <StyledWrapper>
       <SubnavigationIssuesListHeader loading={loading} paging={paging} />
-      <StyledList>
+      <StyledList className="sw-overflow-auto sw-flex-auto">
         {issues.map((issue, index) => {
           const previousIssue = index > 0 ? issues[index - 1] : undefined;
           const displayComponentName =
@@ -82,7 +82,7 @@ export default function SubnavigationIssuesList(props: Props) {
         })}
       </StyledList>
       {paging && paging.total > 0 && (
-        <ListFooter
+        <StyledFooter
           className="sw-my-0 sw-py-4"
           count={issues.length}
           loadMore={props.fetchMoreIssues}
@@ -103,4 +103,11 @@ const StyledList = styled.ul`
 
 const StyledWrapper = styled.div`
   background-color: ${themeColor('filterbar')};
+  height: inherit;
+  display: flex;
+  flex-direction: column;
+`;
+
+const StyledFooter = styled(ListFooter)`
+  box-shadow: ${themeShadow('scrolling')};
 `;

diff --git a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesListHeader.tsx b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesListHeader.tsx
index c7e86b2602b54a25f2883674321067e7c0626e97..440c922ed06c99b6936fbaf2de0e07b4c0aab116 100644 (file)
--- a/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesListHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/issues-subnavigation/SubnavigationIssuesListHeader.tsx
@@ -18,7 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import { Spinner, SubnavigationHeading, themeBorder } from 'design-system';
+import { Spinner, SubnavigationHeading, themeShadow } from 'design-system';
 import * as React from 'react';
 import { Paging } from '../../../types/types';
 import IssuesCounter from '../components/IssuesCounter';
@@ -32,14 +32,12 @@ export default function SubnavigationIssuesListHeader(props: Props) {
   const { loading, paging } = props;
 
   return (
-    <StyledHeader>
+    <StyledHeader className="sw-z-normal">
       <Spinner loading={loading}>{paging && <IssuesCounter total={paging.total} />}</Spinner>
     </StyledHeader>
   );
 }
 
 const StyledHeader = styled(SubnavigationHeading)`
-  position: sticky;
-  top: 0;
-  border-bottom: ${themeBorder('default', 'filterbarBorder')};
+  box-shadow: ${themeShadow('scrolling')};
 `;

diff --git a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
index a2ced9eed20f6e43658df7f662cf7f5f09c8f763..ce03c60eb7a1b23a8c248f08706cf6be035a2116 100644 (file)
--- a/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
+++ b/server/sonar-web/src/main/js/components/controls/ListFooter.tsx
@@ -106,7 +106,7 @@ export default function ListFooter(props: ListFooterProps) {
       ref={rootNode}
       className={classNames(
         'list-footer', // .list-footer is only used by Selenium tests; we should find a way to remove it.
-        'sw-body-sm sw-mt-4 sw-flex sw-items-center sw-justify-center',
+        'sw-body-sm sw-flex sw-items-center sw-justify-center',
         { 'sw-opacity-50 sw-duration-500 sw-ease-in-out': !ready },
         className,
       )}
@@ -133,4 +133,6 @@ export default function ListFooter(props: ListFooterProps) {
 
 const StyledDiv = styled.div`
   color: ${themeColor('pageContentLight')};
+
+  margin-top: 1rem /* 16px */;
 `;