🔧 fix(Navigation.tsx): make insights navigation container scrollable

AppQuality · Jul 26, 2023 · 3977b88 · 3977b88
1 parent 753a7d9
commit 3977b88
Showing 1 changed file with 39 additions and 33 deletions.
diff --git a/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Navigation.tsx b/src/pages/Campaign/useWidgets/Experience/widgets/Insights/Navigation.tsx
@@ -29,7 +29,11 @@ const StyledStickyNavItem = styled(StickyNavItem)`
   }
 `;
 
-// TODO: Make this a scrollable container
+const ScrollingContainer = styled.div`
+  max-height: calc(80vh - ${appTheme.components.chrome.header.height});
+  overflow-y: auto;
+  padding-right: ${({ theme }) => theme.space.sm};
+`;
 
 const Navigation = ({ insights }: { insights: Insight[] }) => {
   const { t } = useTranslation();
@@ -40,39 +44,41 @@ const Navigation = ({ insights }: { insights: Insight[] }) => {
         {t('__CAMPAIGN_PAGE_INSIGHTS_NAVIGATION_TITLE')}
       </StickyNavItemLabel>
       <StyledDivider />
-      {insights.length > 0 &&
-        insights.map((insight, index) => (
-          <StyledStickyNavItem
-            id={`anchor-insight-row-${insight.id}`}
-            to={`insight-row-${insight.id}`}
-            containerId="main"
-            spy
-            smooth
-            duration={500}
-            offset={-30}
-          >
-            <StyledBugCard
-              severity={getSeverity(insight.severity) as Severities}
-              url="#"
-              style={{
-                marginBottom: appTheme.space.sm,
-              }}
+      <ScrollingContainer>
+        {insights.length > 0 &&
+          insights.map((insight, index) => (
+            <StyledStickyNavItem
+              id={`anchor-insight-row-${insight.id}`}
+              to={`insight-row-${insight.id}`}
+              containerId="main"
+              spy
+              smooth
+              duration={500}
+              offset={-30}
             >
-              {() => (
-                <>
-                  <BugCard.TopTitle>
-                    {t('__CAMPAIGN_PAGE_INSIGHTS_NUMBER_LABEL')} {index + 1}
-                  </BugCard.TopTitle>
-                  <BugCard.Title>{insight.title}</BugCard.Title>
-                  <BugCard.Footer>
-                    {getClusterTag(insight.cluster, t)}
-                    {getSeverityTag(insight.severity)}
-                  </BugCard.Footer>
-                </>
-              )}
-            </StyledBugCard>
-          </StyledStickyNavItem>
-        ))}
+              <StyledBugCard
+                severity={getSeverity(insight.severity) as Severities}
+                url="#"
+                style={{
+                  marginBottom: appTheme.space.sm,
+                }}
+              >
+                {() => (
+                  <>
+                    <BugCard.TopTitle>
+                      {t('__CAMPAIGN_PAGE_INSIGHTS_NUMBER_LABEL')} {index + 1}
+                    </BugCard.TopTitle>
+                    <BugCard.Title>{insight.title}</BugCard.Title>
+                    <BugCard.Footer>
+                      {getClusterTag(insight.cluster, t)}
+                      {getSeverityTag(insight.severity)}
+                    </BugCard.Footer>
+                  </>
+                )}
+              </StyledBugCard>
+            </StyledStickyNavItem>
+          ))}
+      </ScrollingContainer>
     </StickyContainer>
   );
 };