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="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">

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

templates/repo/diff/box.tmpl

@@ -110,7 +110,7 @@
 					{{$isExpandable := or (gt $file.Addition 0) (gt $file.Deletion 0) $file.IsBin}}
 					{{$isReviewFile := and $.IsSigned $.PageIsPullFiles (not $.IsArchived) $.IsShowingAllCommits}}
 					<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}} tw-mt-0" id="diff-{{$file.NameHash}}" data-old-filename="{{$file.OldName}}" data-new-filename="{{$file.Name}}" {{if or ($file.ShouldBeHidden) (not $isExpandable)}}data-folded="true"{{end}}>
-						<h4 class="diff-file-header sticky-2nd-row ui top attached header tw-font-normal tw-flex tw-items-center tw-justify-between tw-flex-wrap">
+						<h4 class="diff-file-header sticky-2nd-row ui top attached header">
 							<div class="diff-file-name tw-flex tw-flex-1 tw-items-center tw-gap-1 tw-flex-wrap">
 								<button class="fold-file btn interact-bg tw-p-1{{if not $isExpandable}} tw-invisible{{end}}">
 									{{if $file.ShouldBeHidden}}

templates/repo/diff/conversation.tmpl

@@ -40,8 +40,8 @@
 					{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
 				</ui>
 			</div>
-			<div class="tw-flex tw-justify-end tw-items-center tw-flex-wrap tw-mt-2">
+			<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap">
-				<div class="ui buttons tw-mr-1">
+				<div class="ui buttons">
 					<button class="ui icon tiny basic button previous-conversation">
 						{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
 					</button>
@@ -50,7 +50,7 @@
 					</button>
 				</div>
 				{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
-					<button class="ui icon tiny basic button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
+					<button class="ui icon tiny basic button resolve-conversation tw-mr-0" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
 						{{if $resolved}}
 							{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
 						{{else}}
@@ -59,7 +59,7 @@
 					</button>
 				{{end}}
 				{{if and $.SignedUserID (not $.Repository.IsArchived)}}
-					<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
+					<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0">
 						{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
 					</button>
 				{{end}}

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: 30px;
-  width: 2.5em;
 }
 
 .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.commits-list .ui.avatar {
-.repository.view.issue .comment-list .timeline-item.event .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;
 }