body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; height: 100%; margin: 0; padding: 0; scrollbar-gutter: stable; overflow: hidden; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } #browser-content { height: 100vh; /* Ensure it takes the full viewport height */ display: flex; flex-direction: column; /* Stack children vertically */ } .right-side-panel { overflow-y: auto; /* Enable vertical scrolling */ height: 100%; /* Full height of its parent */ } #browser-window { overflow-y: auto; /* Allow vertical scrolling within this component */ height: 100%; /* Set to 100% of parent height */ max-height: calc(100vh - @media (max-width: 1200px) { #browser-content { flex-direction: column; /* Stack them vertically on smaller screens */ } .right-side-panel { height: auto; /* Allow it to adjust its height */ } } /* Ensure proper spacing */ .right-side-panel { overflow-y: auto; height: 100%; /* Full height of its parent */ margin: 0; /* Adjust margin as needed */ } /* Adjust padding in grid items */ .Grid { padding: 8px; /* Add some padding for inner spacing */ } ); /* Adjust based on your fixed elements */ }