Task
Tailwind
React
When adjusting the scale of an iframe, it disrupts its position within the grid.
Expected Outcome: The iframe should maintain its position after scaling, but with a smaller size.
Current Behavior: The iframe's position is being affected by scaling.
Parent Component
const ContainersView = () => {
return <div className="grid
h-[100vh]
absolute
!ml-[100px]
w-[85vw]
xlg:grid-cols-3 xlg:left-[140px]
lg:left-[150px] lg:grid-cols-2 lg:ml-12 lg:gap-y-24
grid-rows-2
mt-4
mb-4
">
<DockerIframe />
</div>
}
Child Component
const DockerIframe = () => {
return (
<div className=''>
<button className='bg-cyan-800 text-white z-50'>mouse and keyboard</button>
<iframe
allowFullScreen={true}
src={`http://url:8080/`}
className={`
transform
xlg:scale-[0.4]
lg:scale-[0.5]
h-[800px] w-[1038px]
`}
/>
</div>
)
}