From 67df38c809a2d975f30a5e0c5a5ccc922da20906 Mon Sep 17 00:00:00 2001
From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 31 Jan 2024 14:11:54 +0100
Subject: [PATCH] SONAR-21239 Fix issues scrolling

---
 server/sonar-web/design-system/src/theme/light.ts   |  1 +
 .../main/js/apps/issues/components/IssuesApp.tsx    |  4 ++--
 .../issues/issues-subnavigation/IssueLocation.tsx   |  2 +-
 .../SubnavigationIssuesList.tsx                     | 13 ++++++++++---
 .../SubnavigationIssuesListHeader.tsx               |  8 +++-----
 .../src/main/js/components/controls/ListFooter.tsx  |  4 +++-
 6 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/server/sonar-web/design-system/src/theme/light.ts b/server/sonar-web/design-system/src/theme/light.ts
index dbce87280d1..8e45ccb51d5 100644
--- 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 8d29062fc9f..1b1573006e6 100644
--- 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 6704f0966f0..c2414f6579b 100644
--- 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 a4fc10973b3..535026d0c36 100644
--- 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 c7e86b2602b..440c922ed06 100644
--- 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 a2ced9eed20..ce03c60eb7a 100644
--- 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 */;
 `;
-- 
2.39.5