Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add CSS to make size of review box responsive to browser resizing #80

Open
JonJagger opened this issue Jul 6, 2021 · 0 comments
Open

Comments

@JonJagger
Copy link
Member

From Jer Clarke

.CodeMirror,
.diff-line-numbers,
.diff-sheet {
height: calc(100vh - 125px);
}
.CodeMirror,
#kata-page .right-column,
#review-page .right-column,
#review-page .file-content table:first-child,
#review-page #review-traffic-lights {
width: calc(100vw - 500px);
}
.diff-sheet {
width: 100%;
}
#review-page .file-content table:first-child td:first-child {
width: 40px;
}

Notice that I did a bunch of :first-child stuff for the generic table and td tags. If you have the ability to add a class to those tags and use that, you could simplify the CSS and make it safer at the same time, but from what I can tell those selectors won't hit anything else.

The last one 40px was tricky, it's to match the 40px size of the div.diff-line-numbers that is inside the TD. From what I can tell, you could also just remove the 40px width from the div.diff-line-numbers and simplify the whole thing, or just have the 40px on the containing td. If you have it on the div but not the td, then the td expands using table logic and there's a blank space, so that's what it's doing now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: No status
Development

No branches or pull requests

1 participant