Skip to content

Commit 847f0bb

Browse files
GiteaBotsilverwind
andauthored
Fix review box viewport overflow issue (#23800) (#23898)
Backport #23800 by @silverwind 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. Co-authored-by: silverwind <[email protected]>
1 parent 1886bd6 commit 847f0bb

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
@@ -225,28 +225,10 @@ a.blob-excerpt:hover {
225225
max-height: calc(100vh - 360px);
226226
}
227227

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

252234
#review-box {

0 commit comments

Comments
 (0)