While working on a navigation menu, I noticed that in large screens the navigation looks fine but in laptop view, the words are breaking up and it's acceptable. However, I want to remove the extra spacing after the text.
In the large screen:
https://i.sstatic.net/oCM7L.png
In the laptop view, there is another image where I want to remove the space before the border.
https://i.sstatic.net/JSquX.png
For example, there is a gap between "App Service Performance" and "App Explorer" which I want to eliminate.
Below is the code I am currently using:
<Box
display="flex"
justifySelf="start"
flex="1 1 0"
alignItems="center"
sx={{
flexDirection: "row",
width: "100%",
alignItems: "center",
}}
>
{pages &&
pages.map((page: Page, index: number) => (
<Fragment key={page.id}>
{index !== 0 && (
<Divider
sx={{ marginX: 1, paddingY: "15px" }}
orientation="vertical"
variant="middle"
flexItem
/>
)}
<Typography
component={Link}
to={`/${siteId}/${page.id}`}
key={page.id}
sx={{
color:
page.id === activePage?.id
? theme.palette.common.white
: theme.palette.grey["200"],
textDecoration: "none",
}}
>
{page.name}
</Typography>
</Fragment>
))}
</Box>