cyber-dojo / web

repo for the cyberdojo/web Docker image; a cyber-dojo microservice

Home Page:https://cyber-dojo.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.