Fix timeline event layout overflow with long content

templates/repo/issue/view_content/comments.tmpl

@@ -142,12 +142,12 @@
 			<div class="timeline-item event" id="{{.HashTag}}">
 				<span class="badge">{{svg "octicon-bookmark"}}</span>
 				{{template "shared/user/avatarlink" dict "user" .Poster}}
-				{{if eq .RefAction 3}}<del>{{end}}
 				<span class="comment-text-line">
+					{{if eq .RefAction 3}}<del>{{end}}
 					{{template "shared/user/authorlink" .Poster}}
 					{{ctx.Locale.Tr $refTr .EventTag $createdStr (.RefCommentLink ctx) $refFrom}}
+					{{if eq .RefAction 3}}</del>{{end}}
 				</span>
-				{{if eq .RefAction 3}}</del>{{end}}
 
 				<div class="detail flex-text-block">
 					<span class="comment-text-line"><a href="{{.RefIssueLink ctx}}"><b>{{.RefIssueTitle ctx}}</b> {{.RefIssueIdent ctx}}</a></span>
@@ -447,7 +447,7 @@
 				{{end}}
 
 				{{if and .Review .Review.CodeComments}}
-				<div class="timeline-item event">
+				<div class="timeline-item event code-comments-list">
 					{{range $filename, $lines := .Review.CodeComments}}
 						{{range $line, $comms := $lines}}
 							{{template "repo/issue/view_content/conversation" dict "." $ "comments" $comms}}
@@ -545,7 +545,7 @@
 					{{end}}
 				</span>
 				{{if and .IsForcePush $.Issue.PullRequest.BaseRepo.Name}}
-					<a class="ui label comment-text-label tw-float-right" href="{{$.Issue.PullRequest.BaseRepo.Link}}/compare/{{PathEscape .OldCommit}}..{{PathEscape .NewCommit}}" rel="nofollow">{{ctx.Locale.Tr "repo.issues.force_push_compare"}}</a>
+					<a class="ui label comment-text-label tw-ml-auto" href="{{$.Issue.PullRequest.BaseRepo.Link}}/compare/{{PathEscape .OldCommit}}..{{PathEscape .NewCommit}}" rel="nofollow">{{ctx.Locale.Tr "repo.issues.force_push_compare"}}</a>
 				{{end}}
 			</div>
 			{{if not .IsForcePush}}

templates/repo/issue/view_content/comments_delete_time.tmpl

@@ -1,7 +1,7 @@
 {{if and .comment.Time (.ctxData.Repository.IsTimetrackerEnabled ctx)}} {{/* compatibility with time comments made before v1.14 */}}
 	{{if (not .comment.Time.Deleted)}}
 		{{if (or .ctxData.IsAdmin (and .ctxData.IsSigned (eq .ctxData.SignedUserID .comment.PosterID)))}}
-			<span class="tw-float-right">
+			<span class="tw-ml-auto">
 				<button class="ui icon button compact mini link-action" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.del_time"}}"
 								data-url="{{.ctxData.RepoLink}}/issues/{{.ctxData.Issue.Index}}/times/{{.comment.TimeID}}/delete?id={{.comment.Time.ID}}"
 								data-modal-confirm="{{ctx.Locale.Tr "repo.issues.del_time"}}"

web_src/css/repo.css

@@ -465,7 +465,7 @@ td .commit-summary {
 }
 
 .repository.view.issue .comment-list .timeline-avatar-offset {
-  margin-top: 48px;
+  top: 51px;
 }
 
 .repository.view.issue .comment-list .timeline-item {
@@ -503,9 +503,8 @@ td .commit-summary {
   border-radius: var(--border-radius-full);
   display: flex;
   flex-shrink: 0;
-  float: left;
   margin-left: -33px;
-  margin-right: 8px;
+  margin-right: 4px;
   color: var(--color-text);
   align-items: center;
   justify-content: center;
@@ -522,10 +521,6 @@ td .commit-summary {
   padding: 3px;
 }
 
-.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment {
-  margin-top: 2px;
-}
-
 .repository.view.issue .comment-list .timeline-item.comment > .content {
   margin-left: -16px;
 }
@@ -534,7 +529,6 @@ td .commit-summary {
   /* TODO: this "line-height" is not ideal (actually it is abused), many layouts depend on this magic value,
       for example: alignment of the header arrow and the avatar, view PR commit list left icon layout, dismiss review with reason, etc */
   line-height: 32px;
-  vertical-align: middle;
   color: var(--color-text-light);
   min-width: 0;
 }
@@ -547,23 +541,12 @@ td .commit-summary {
   color: inherit;
 }
 
-.repository.view.issue .comment-list .timeline-item .avatar-with-link + .comment-text-line {
-  margin-left: 0.25em;
-}
-
 .repository.view.issue .comment-list .timeline-item.commits-list {
   padding-left: 15px;
   padding-top: 0;
 }
 
-.repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
-  float: right;
-  margin-right: 8px;
-  margin-top: 4px;
-}
-
 .repository.view.issue .comment-list .timeline-item .comment-text-label {
-  vertical-align: middle;
   border: 1px solid var(--color-light-border);
   height: 26px;
   margin: 4px 0; /* because this label is beside the comment line, which has "line-height: 34px" */
@@ -677,21 +660,35 @@ td .commit-summary {
 
 .repository.view.issue .comment-list .event {
   padding-left: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
 }
 
-.repository.view.issue .comment-list .event .detail {
-  margin-top: 4px;
-  margin-left: 15px;
+.repository.view.issue .comment-list .event.code-comments-list {
+  display: block;
 }
 
-.repository.view.issue .comment-list .event .detail .text {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+.repository.view.issue .comment-list .event > .badge {
+  align-self: flex-start;
 }
 
-.repository.view.issue .comment-list .event .segments {
-  box-shadow: none;
+.repository.view.issue .comment-list .event > .avatar-with-link {
+  align-self: flex-start;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.repository.view.issue .comment-list .event > .comment-text-line {
+  flex: 1;
+  min-width: 0;
+}
+
+.repository.view.issue .comment-list .event > .detail {
+  margin-left: 15px;
+  width: 100%;
 }
 
 .repository.view.issue .ui.depending .item.is-closed .issue-dependency-title {