I'm currently working on a website project and utilizing a component for displaying dark mode. However, I've encountered an issue where the Component shrinks excessively when the screen size goes below 600px, unlike other components.
This is a snippet of my app.js file:
function MyApp({ Component, pageProps }) {
return (
<>
<Head>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<ThemeChanger>
<Paper square elevation={0}>
<Layout>
<Component {...pageProps} />
</Layout>
</Paper>
</ThemeChanger>
</>
);
}
Check out these sample images for reference:
UI image at a width greater than 700px:
https://i.stack.imgur.com/6dBwI.png
UI image at a width less than 600px:
https://i.stack.imgur.com/Ua3yM.png
Here are some approaches I've already attempted: - Adding flex and min-width: "100%" to the component - All other components are functioning correctly, except this one
Technologies used in the project: - NextJS v11 - Material Ui v5