1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-10 01:19:53 +01:00

fix: use short lists on flex containers

This commit is contained in:
Thomas Heartman 2024-10-11 09:37:26 +02:00
parent 12d0bb5ced
commit 6601533823
No known key found for this signature in database
GPG Key ID: BD1F880DAED1EE78
3 changed files with 16 additions and 13 deletions

View File

@ -1,4 +1,4 @@
import { Box, styled } from '@mui/material';
import { Box, List, styled } from '@mui/material';
import type { Theme } from '@mui/material/styles/createTheme';
export const ContentGridContainer = styled('div')({
@ -104,3 +104,12 @@ export const listItemStyle = (theme: Theme) => ({
alignItems: 'flex-start',
gap: theme.spacing(1),
});
export const StyledList = styled(List)(({ theme }) => ({
overflowY: 'auto',
maxHeight: '400px',
...onWideContainer({
maxHeight: '100%',
})({ theme }),
}));

View File

@ -2,7 +2,6 @@ import {
Box,
IconButton,
Link,
List,
ListItem,
ListItemButton,
Typography,
@ -28,6 +27,7 @@ import {
ProjectGrid,
GridItem,
SpacedGridItem,
StyledList,
} from './Grid';
import { ContactAdmins, DataError } from './ProjectDetailsError';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
@ -199,10 +199,7 @@ export const MyProjects = forwardRef<
<ContentGridContainer ref={ref}>
<ProjectGrid>
<SpacedGridItem gridArea='projects'>
<List
disablePadding={true}
sx={{ height: '100%', overflow: 'auto' }}
>
<StyledList>
{projects.map((project) => (
<ProjectListItem
key={project.id}
@ -211,7 +208,7 @@ export const MyProjects = forwardRef<
onClick={() => setActiveProject(project.id)}
/>
))}
</List>
</StyledList>
</SpacedGridItem>
<SpacedGridItem gridArea='box1'>
{box1Content()}

View File

@ -7,7 +7,6 @@ import {
Button,
IconButton,
Link,
List,
ListItem,
ListItemButton,
styled,
@ -32,6 +31,7 @@ import {
ListItemBox,
listItemStyle,
SpacedGridItem,
StyledList,
} from './Grid';
import { ContentGridNoProjects } from './ContentGridNoProjects';
import ExpandMore from '@mui/icons-material/ExpandMore';
@ -299,9 +299,6 @@ export const PersonalDashboard = () => {
!detailsError && activeProjectStage === 'loading',
);
const [createFlagDialogOpen, setCreateFlagDialogOpen] =
React.useState(false);
return (
<MainContent>
<WelcomeSection>
@ -386,7 +383,7 @@ export const PersonalDashboard = () => {
<SpacedGridItem gridArea='flags'>
{personalDashboard &&
personalDashboard.flags.length > 0 ? (
<List
<StyledList
disablePadding={true}
sx={{
height: '100%',
@ -406,7 +403,7 @@ export const PersonalDashboard = () => {
}
/>
))}
</List>
</StyledList>
) : activeProject ? (
<NoActiveFlagsInfo>
<Typography>