Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-11-24 20:06:55 +01:00
Code Issues Projects Releases Wiki Activity

fix: use short lists on flex containers

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/src/component/personalDashboard/Grid.tsx
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'; import type { Theme } from '@mui/material/styles/createTheme';
export const ContentGridContainer = styled('div')({ export const ContentGridContainer = styled('div')({
@ -104,3 +104,12 @@ export const listItemStyle = (theme: Theme) => ({
alignItems: 'flex-start', alignItems: 'flex-start',
gap: theme.spacing(1), gap: theme.spacing(1),
}); });
export const StyledList = styled(List)(({ theme }) => ({
overflowY: 'auto',
maxHeight: '400px',
...onWideContainer({
maxHeight: '100%',
})({ theme }),
}));

9
frontend/src/component/personalDashboard/MyProjects.tsx
View File

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

9
frontend/src/component/personalDashboard/PersonalDashboard.tsx
View File

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