style: add logic to handle different screen sizes

This commit is contained in:
Pragadesh-45 2024-10-16 13:00:00 +05:30
parent b900d3070d
commit ca6c2ebb03
2 changed files with 23 additions and 1 deletions

View File

@ -35,6 +35,28 @@ const StyledWrapper = styled.div`
background-color: ${(props) => props.theme.collection.environment.settings.item.active.hoverBg} !important;
}
}
.flexible-container {
width: 100%;
}
@media (max-width: 600px) {
.flexible-container {
width: 500px;
}
}
@media (min-width: 601px) and (max-width: 1200px) {
.flexible-container {
width: 800px;
}
}
@media (min-width: 1201px) {
.flexible-container {
width: 900px;
}
}
`;
export default StyledWrapper;

View File

@ -48,7 +48,7 @@ const GenerateCodeItem = ({ collection, item, onClose }) => {
return (
<Modal size="lg" title="Generate Code" handleCancel={onClose} hideFooter={true}>
<StyledWrapper>
<div className="flex w-full" style={{ width: '1000px' }}>
<div className="flex w-full flexible-container">
<div>
<div className="generate-code-sidebar">
{languages &&