I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this remaining space and have the text close to the drawer even after resizing it. I'm unsure about where to make changes in the box or containers to achieve this.
Resized MUI drawer:
https://i.sstatic.net/63VWs.png
The highlighted lines show the extra space that needs to be removed (highlighted lines by Pesticide chrome extension): https://i.sstatic.net/Ig2aO.png
Sample source code for the drawer:
import * as React from "react";
import Box from "@mui/material/Box";
import Drawer from "@mui/material/Drawer";
import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import List from "@mui/material/List";
import Typography from "@mui/material/Typography";
import Divider from "@mui/material/Divider";
import ListItem from "@mui/material/ListItem";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemIcon from "@mui/material/ListItemIcon";
import ListItemText from "@mui/material/ListItemText";
import InboxIcon from "@mui/icons-material/MoveToInbox";
import MailIcon from "@mui/icons-material/Mail";
// Rest of the sample code remains unchanged
<p>CSS code to resize the drawer:</p>
<pre><code>.MuiDrawer-paper {
width: 10% !important;
}
Your insights on resolving this issue with the MUI drawer would be greatly appreciated. Thank you!