Improve mobile review ui (#31091) (#31136)

Backport #31091 by @silverwind

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="a06b1edf-dece-4402-98c2-68670fca265f">

After:
<img width="457" alt="Screenshot 2024-05-27 at 01 59 06"
src="2a282c96-e719-4554-b418-81963ae6269c">

Co-authored-by: silverwind <me@silverwind.io>

web_src/css/markup/content.css

@@ -2,7 +2,7 @@
   overflow: hidden;
   font-size: 16px;
   line-height: 1.5 !important;
-  word-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 
 .markup > *:first-child {

web_src/css/modules/comment.css

@@ -14,6 +14,7 @@
 }
 
 .ui.comments .comment {
+  display: flex;
   position: relative;
   background: none;
   margin: 3px 0 0;
@@ -23,6 +24,10 @@
   line-height: 1.2;
 }
 
+.edit-content-zone .comment {
+  flex-direction: column;
+}
+
 .ui.comments .comment:first-child {
   margin-top: 0;
   padding-top: 0;
@@ -46,16 +51,17 @@
 }
 
 .ui.comments .comment .avatar {
-  float: left;
-  width: 2.5em;
+  width: 30px;
 }
 
 .ui.comments .comment > .content {
-  display: block;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
 }
 
 .ui.comments .comment > .avatar ~ .content {
-  margin-left: 3.5em;
+  margin-left: 12px;
 }
 
 .ui.comments .comment .author {

web_src/css/modules/segment.css

@@ -156,7 +156,8 @@
 .ui.attached.segment:last-child,
 .ui.segment:has(+ .ui.segment:not(.attached)),
 .ui.attached.segment:has(+ .ui.modal) {
-  border-radius: 0 0 0.28571429rem 0.28571429rem;
+  border-bottom-left-radius: 0.28571429rem;
+  border-bottom-right-radius: 0.28571429rem;
 }
 
 .ui[class*="top attached"].segment {

web_src/css/repo.css

@@ -824,8 +824,7 @@ td .commit-summary {
   padding-top: 0;
 }
 
-.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
-.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
+.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
   margin-right: 0.25em;
 }
 
@@ -1037,10 +1036,6 @@ td .commit-summary {
   margin-top: 6px;
 }
 
-.repository.view.issue .comment-list .comment > .avatar ~ .content {
-  margin-left: 42px;
-}
-
 .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
   margin: 0;
 }
@@ -1064,12 +1059,6 @@ td .commit-summary {
   box-shadow: none;
 }
 
-@media (max-width: 767.98px) {
-  .repository.view.issue .comment-list {
-    padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
-  }
-}
-
 .repository.view.issue .ui.depending .item.is-closed .title {
   text-decoration: line-through;
 }
@@ -1551,39 +1540,6 @@ td .commit-summary {
   height: 30px;
 }
 
-.repository .diff-box .header:not(.resolved-placeholder) {
-  display: flex;
-  align-items: center;
-}
-
-.repository .diff-box .header:not(.resolved-placeholder) .file {
-  min-width: 0;
-}
-
-.repository .diff-box .header:not(.resolved-placeholder) .file .file-link {
-  max-width: fit-content;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.repository .diff-box .header:not(.resolved-placeholder) .button {
-  padding: 0 12px;
-  flex: 0 0 auto;
-  margin-right: 0;
-  height: 30px;
-}
-
-.repository .diff-box .resolved-placeholder {
-  display: flex;
-  align-items: center;
-  font-size: 14px !important;
-  height: 36px;
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
 .repository .diff-box .resolved-placeholder .button {
   padding: 8px 12px;
 }
@@ -2428,6 +2384,10 @@ tbody.commit-list {
 }
 
 .resolved-placeholder {
+  display: flex;
+  align-items: center;
+  font-size: 14px !important;
+  padding: 8px !important;
   font-weight: var(--font-weight-normal) !important;
   border: 1px solid var(--color-secondary) !important;
   border-radius: var(--border-radius) !important;
@@ -2537,6 +2497,38 @@ tbody.commit-list {
 .diff-file-header {
   padding: 5px 8px !important;
   box-shadow: 0 -1px 0 1px var(--color-body); /* prevent borders being visible behind top corners when sticky and scrolled */
+  font-weight: var(--font-weight-normal);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.diff-file-header .file {
+  min-width: 0;
+}
+
+.diff-file-header .file-link {
+  max-width: fit-content;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+
+.diff-file-header .button {
+  padding: 0 12px;
+  flex: 0 0 auto;
+  margin-right: 0;
+  height: 30px;
+}
+
+@media (max-width: 767.98px) {
+  .diff-file-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
 }
 
 .diff-file-box[data-folded="true"] .diff-file-body {

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;
 }