fix: features sidebar scroll (#5524)

Feature toggle overview screen - the sidebar getting sticky was making it hard to see many environments
Unleash · Dec 5, 2023 · 795c673 · 795c673
1 parent 20ebe8f
commit 795c673
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/...feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx b/...feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanel.tsx
@@ -1,4 +1,4 @@
-import { Divider, styled } from '@mui/material';
+import { Box, Divider, styled } from '@mui/material';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
@@ -7,7 +7,7 @@ import { FeatureOverviewSidePanelEnvironmentSwitches } from './FeatureOverviewSi
 import { FeatureOverviewSidePanelTags } from './FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags';
 import { Sticky } from 'component/common/Sticky/Sticky';
 
-const StyledContainer = styled(Sticky)(({ theme }) => ({
+const StyledContainer = styled(Box)(({ theme }) => ({
     top: theme.spacing(2),
     borderRadius: theme.shape.borderRadiusLarge,
     backgroundColor: theme.palette.background.paper,
@@ -52,9 +52,10 @@ export const FeatureOverviewSidePanel = ({
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
     const { feature } = useFeature(projectId, featureId);
+    const isSticky = feature.environments?.length <= 3;
 
     return (
-        <StyledContainer>
+        <StyledContainer as={isSticky ? Sticky : Box}>
             <FeatureOverviewSidePanelEnvironmentSwitches
                 header={
                     <StyledHeader data-loading>