From 847f0bb9f35bcd160eb1f369a8f4d0dbdebee334 Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Mon, 3 Apr 2023 12:11:08 -0400
Subject: [PATCH] Fix review box viewport overflow issue (#23800) (#23898)

Backport #23800 by @silverwind

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.

Co-authored-by: silverwind <me@silverwind.io>
---
 web_src/css/review.css | 26 ++++----------------------
 1 file changed, 4 insertions(+), 22 deletions(-)

diff --git a/web_src/css/review.css b/web_src/css/review.css
index e181d0109b..05456c381b 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -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 {