Skip to content

Commit d0c406a

Browse files
authored
Fix review box viewport overflow issue (#23800)
Fix regression that came likely from #23271: Long lines of text currently cause the review box's CodeMirror element to resize which apparently is not recognized by [popper's resize detection](https://popper.js.org/docs/v2/modifiers/event-listeners/) and which causes the element to go partially out of viewport until a reflow happens: ![wrap](https://user-images.githubusercontent.com/115237/228673260-f8ffe89e-5724-4fb9-b93f-30b146c4c436.gif) Fix this by setting the element to a static width derived from viewport width and remove the previously clumsy media queries.
1 parent 6eb856c commit d0c406a

File tree

1 file changed

+4
-22
lines changed

1 file changed

+4
-22
lines changed

web_src/css/review.css

+4-22
Original file line numberDiff line numberDiff line change
@@ -224,28 +224,10 @@ a.blob-excerpt:hover {
224224
max-height: calc(100vh - 360px);
225225
}
226226

227-
@media (max-width: 767px) {
228-
.review-box-panel .CodeMirror-scroll {
229-
max-width: calc(100vw - 70px);
230-
}
231-
}
232-
233-
@media (min-width: 768px) and (max-width: 991px) {
234-
.review-box-panel .CodeMirror-scroll {
235-
max-width: 700px;
236-
}
237-
}
238-
239-
@media (min-width: 992px) and (max-width: 1200px) {
240-
.review-box-panel .CodeMirror-scroll {
241-
max-width: 800px;
242-
}
243-
}
244-
245-
@media (min-width: 1201px) {
246-
.review-box-panel .CodeMirror-scroll {
247-
max-width: 900px;
248-
}
227+
.review-box-panel .editor-toolbar,
228+
.review-box-panel .CodeMirror-scroll {
229+
width: min(calc(100vw - 2em), 800px);
230+
max-width: none;
249231
}
250232

251233
.review-box-panel .combo-markdown-editor textarea {

0 commit comments

Comments
 (0)