2 dimensional MUI Grid Layout with truncation

Question

I'm using Material UI v5 for layouting. I don't know how to truncate a string within a 2 dimensional Grid layout (within a Dialog).

I want to create a file upload component, with the following layout:

I can create a 1 dimensional Grid layout with truncation:

With the following code:

export function App() {
    return (
        <Dialog open={true} fullWidth maxWidth={"xs"}>
            <DialogContent>
                <Grid container columnSpacing={2}>
                    <Grid item xs zeroMinWidth>
                        <Typography noWrap>
                            long filename which needs to be truncated
                            long filename which needs to be truncated
                        </Typography>
                    </Grid>
                    <Grid item xs={"auto"}>
                        <Typography>100%</Typography>
                    </Grid>
                </Grid>
            </DialogContent>
        </Dialog>
    )
}

When I add another dimension for the LinearProgress indicator, I get an overflow:

That's how far I've come so far:

export function App() {
    return (
        <Dialog open={true} fullWidth maxWidth={"xs"}>
            <DialogContent>
                <Grid container direction={"column"}>
                    <Grid item>
                        <Grid container columnSpacing={2}>
                            <Grid item xs zeroMinWidth>
                                <Typography noWrap>
                                    long filename which needs to be truncated
                                    long filename which needs to be truncated
                                </Typography>
                            </Grid>
                            <Grid item xs={"auto"}>
                                <Typography>100%</Typography>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid item>
                        <LinearProgress/>
                    </Grid>
                </Grid>
            </DialogContent>
        </Dialog>
    )
}

I suppose that the overflow is exactly the length of the Typography component. How can I solve this problem?

Answer 1

It did get fixed with GridV2 which currently (V5) is marked as unstable and will replace the old grid in V6.

import Grid2 from '@mui/material/Unstable_Grid2'

export function App() {
    return (
            <Dialog open fullWidth maxWidth={"xs"}>
                <DialogContent>
                    <Grid2 container direction={"column"} wrap={"nowrap"}>
                        <Grid2>
                            <Grid2 container columnSpacing={2}>
                                <Grid2 xs>
                                    <Typography noWrap>
                                        long filename which needs to be truncated
                                        long filename which needs to be truncated
                                    </Typography>
                                </Grid2>
                                <Grid2 xs={"auto"}>
                                    <Typography>100%</Typography>
                                </Grid2>
                            </Grid2>
                        </Grid2>
                        <Grid2>
                            <LinearProgress/>
                        </Grid2>
                    </Grid2>
                </DialogContent>
            </Dialog>
    );
}