SONAR-21239 Fix issues scrolling

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

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

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',
       });
     }

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')};
 `;

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')};
 `;

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 */;
 `;