Skip to content

Commit

Permalink
Fix review box viewport overflow issue (go-gitea#23800)
Browse files Browse the repository at this point in the history
Fix regression that came likely from
go-gitea#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.
  • Loading branch information
silverwind authored and Linux User committed Apr 3, 2023
1 parent 1886bd6 commit 7685879
Showing 1 changed file with 4 additions and 22 deletions.
26 changes: 4 additions & 22 deletions web_src/css/review.css
Original file line number Diff line number Diff line change
Expand Up @@ -225,28 +225,10 @@ a.blob-excerpt:hover {
max-height: calc(100vh - 360px);
}

@media (max-width: 767px) {
.review-box-panel .CodeMirror-scroll {
max-width: calc(100vw - 70px);
}
}

@media (min-width: 768px) and (max-width: 991px) {
.review-box-panel .CodeMirror-scroll {
max-width: 700px;
}
}

@media (min-width: 992px) and (max-width: 1200px) {
.review-box-panel .CodeMirror-scroll {
max-width: 800px;
}
}

@media (min-width: 1201px) {
.review-box-panel .CodeMirror-scroll {
max-width: 900px;
}
.review-box-panel .editor-toolbar,
.review-box-panel .CodeMirror-scroll {
width: min(calc(100vw - 2em), 800px);
max-width: none;
}

#review-box {
Expand Down

0 comments on commit 7685879

Please sign in to comment.