Add CSS to make size of review box responsive to browser resizing
JonJagger opened this issue · comments
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.