Here is my SandBox link for reference: https://codesandbox.io/embed/material-demo-j6pz9?fontsize=14&hidenavigation=1&theme=dark
I am attempting to organize content within a card using an inline grid display to have them appear side by side. I understand that the Card component in Material-UI is responsive, adjusting its size based on the content provided.
In order to make the table smaller and have the card shrink accordingly, I tried setting the table's width and height to 30%. While the table shrinks, it creates a large margin, resulting in the card size remaining unchanged.
https://i.sstatic.net/Szicj.png
The complete code can be accessed in the sandbox. I believe the issue lies in the following section:
const useStyles = makeStyles({
card: {
display: "inline-grid",
borderRadius: "1em",
boxShadow: "1.4 1.4 #182026",
"&:hover": {
boxShadow: "1 1 #182026"
},
margin: "1em 0",
marginRight: "1em"
},
table: {
width: "30%",
height: "30%"
}
});
I would appreciate any assistance on this matter. Thank you.