Improve mobile review ui (#31091)

Fixes: https://github.com/go-gitea/gitea/issues/31071

Not perfect but much better than before.

Before: Overflows, sticky not working, filename unreadable:

<img width="506" alt="Screenshot 2024-05-27 at 02 02 40"
src="https://github.com/go-gitea/gitea/assets/115237/a06b1edf-dece-4402-98c2-68670fca265f">

After:
<img width="457" alt="Screenshot 2024-05-27 at 01 59 06"
src="https://github.com/go-gitea/gitea/assets/115237/2a282c96-e719-4554-b418-81963ae6269c">

1 files changed, 14 insertions, 56 deletions

diff --git a/web_src/css/review.css b/web_src/css/review.css
index 7534500e6f..6337748939 100644
--- a/web_src/css/review.css
+++ b/web_src/css/review.css
@@ -3,6 +3,7 @@
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   user-select: none;
+  margin-right: 0 !important;
 }
 
 .ui.button.add-code-comment {
@@ -71,57 +72,10 @@
   max-width: 820px;
 }
 
-@media (max-width: 767.98px) {
-  .comment-code-cloud {
-    max-width: none;
-    padding: 0.75rem !important;
-  }
-  .comment-code-cloud .code-comment-buttons {
-    margin: 0.5rem 0 0.25rem !important;
-  }
-  .comment-code-cloud .code-comment-buttons .code-comment-buttons-buttons {
-    width: 100%;
-  }
-  .comment-code-cloud .ui.buttons {
-    width: 100%;
-    margin: 0 !important;
-  }
-  .comment-code-cloud .ui.buttons .button {
-    flex: 1;
-  }
-}
-
 .comment-code-cloud .comments .comment {
   padding: 0;
 }
 
-@media (max-width: 767.98px) {
-  .comment-code-cloud .comments .comment .comment-header-right.actions .ui.basic.label {
-    display: none;
-  }
-  .comment-code-cloud .comments .comment .avatar {
-    width: auto;
-    float: none;
-    margin: 0 0.5rem 0 0;
-    flex-shrink: 0;
-  }
-  .comment-code-cloud .comments .comment .avatar ~ .content {
-    margin-left: 1em;
-  }
-  .comment-code-cloud .comments .comment img.avatar {
-    margin: 0 !important;
-  }
-  .comment-code-cloud .comments .comment .comment-content {
-    margin-left: 0 !important;
-  }
-  .comment-code-cloud .comments .comment .comment-container {
-    width: 100%;
-  }
-  .comment-code-cloud .comments .comment.code-comment {
-    padding: 0 0 0.5rem !important;
-  }
-}
-
 .comment-code-cloud .attached.tab {
   border: 0;
   padding: 0;
@@ -132,6 +86,13 @@
   padding: 1px 8px 1px 12px;
 }
 
+@media (max-width: 767.98px) {
+  .comment-code-cloud .attached.header {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+}
+
 .comment-code-cloud .attached.header .text {
   margin: 0;
 }
@@ -179,14 +140,6 @@
   display: block;
 }
 
-@media (max-width: 767.98px) {
-  .comment-code-cloud .button {
-    width: 100%;
-    margin: 0 !important;
-    margin-bottom: 0.75rem !important;
-  }
-}
-
 .diff-file-body .comment-form {
   margin: 0 0 0 3em;
 }
@@ -273,11 +226,16 @@
   align-items: center;
   border: 1px solid transparent;
   padding: 4px 8px;
-  margin: -8px 0; /* just like other buttons in the diff box header */
   border-radius: var(--border-radius);
   font-size: 0.857rem; /* just like .ui.tiny.button */
 }
 
+@media (max-width: 767.98px) {
+  .viewed-file-form {
+    margin-left: auto;
+  }
+}
+
 .viewed-file-form input {
   margin-right: 4px;
 }