mirror of https://github.com/go-gitea/gitea.git
Fix review box viewport overflow issue (#23800)
Fix regression that came likely from https://github.com/go-gitea/gitea/pull/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.pull/23901/head
parent
6eb856c614
commit
d0c406a86f
|
@ -224,28 +224,10 @@ a.blob-excerpt:hover {
|
||||||
max-height: calc(100vh - 360px);
|
max-height: calc(100vh - 360px);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 767px) {
|
.review-box-panel .editor-toolbar,
|
||||||
.review-box-panel .CodeMirror-scroll {
|
.review-box-panel .CodeMirror-scroll {
|
||||||
max-width: calc(100vw - 70px);
|
width: min(calc(100vw - 2em), 800px);
|
||||||
}
|
max-width: none;
|
||||||
}
|
|
||||||
|
|
||||||
@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 .combo-markdown-editor textarea {
|
.review-box-panel .combo-markdown-editor textarea {
|
||||||
|
|
Loading…
Reference in New Issue