Refactor view issue & comment list styles

templates/repo/commits_list_small.tmpl

@@ -22,7 +22,7 @@
 			<button class="ui button ellipsis-button show-panel toggle" data-panel="[data-singular-commit-body-for='{{$tag}}']">...</button>
 		{{end}}
 
-		<span class="tw-flex tw-items-center tw-gap-2">
+		<span class="flex-text-block">
 			{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses}}
 			{{template "repo/commit_sign_badge" dict "Commit" . "CommitBaseLink" $commitBaseLink "CommitSignVerification" .Verification}}
 		</span>

templates/repo/diff/comments.tmpl

@@ -2,13 +2,15 @@
 
 {{$createdStr:= DateUtils.TimeSince .CreatedUnix}}
 <div class="comment" id="{{.HashTag}}">
-	{{if .OriginalAuthor}}
-		<span class="avatar">{{ctx.AvatarUtils.Avatar nil}}</span>
-	{{else}}
-		{{template "shared/user/avatarlink" dict "user" .Poster}}
-	{{end}}
+	<div class="tw-mt-2 tw-mr-4">
+		{{if .OriginalAuthor}}
+			<span class="avatar">{{ctx.AvatarUtils.Avatar nil}}</span>
+		{{else}}
+			{{template "shared/user/avatarlink" dict "user" .Poster}}
+		{{end}}
+	</div>
 	<div class="content comment-container">
-		<div class="comment-header">
+		<div class="comment-header avatar-content-left-arrow">
 			<div class="comment-header-left">
 				{{if .OriginalAuthor}}
 					<span class="text black tw-font-semibold tw-mr-1">

templates/repo/editor/commit_form.tmpl

@@ -1,6 +1,6 @@
 <div class="commit-form-wrapper">
 	{{ctx.AvatarUtils.Avatar .SignedUser 40 "commit-avatar"}}
-	<div class="commit-form">
+	<div class="commit-form avatar-content-left-arrow">
 		<h3>{{- if .CommitFormOptions.WillSign}}
 			<span title="{{ctx.Locale.Tr "repo.signing.will_sign" .CommitFormOptions.SigningKey}}">{{svg "octicon-lock" 24}}</span>
 			{{ctx.Locale.Tr "repo.editor.commit_signed_changes"}}

templates/repo/issue/new_form.tmpl

@@ -4,8 +4,8 @@
 	<div class="issue-content-left">
 		<div class="ui comments">
 			<div class="comment">
-				{{ctx.AvatarUtils.Avatar .SignedUser 40}}
-				<div class="ui segment content tw-my-0">
+				<div class=" tw-mr-4 not-mobile">{{ctx.AvatarUtils.Avatar .SignedUser 40}}</div>
+				<div class="ui segment content tw-my-0 avatar-content-left-arrow">
 					<div class="field">
 						<input name="title" data-global-init="initInputAutoFocusEnd" id="issue_title" required maxlength="255" autocomplete="off"
 								placeholder="{{ctx.Locale.Tr "repo.milestones.title"}}"

templates/repo/issue/view_content.tmpl

@@ -13,7 +13,7 @@
 				</a>
 				{{end}}
 				<div class="content comment-container">
-					<div class="comment-header" role="heading" aria-level="3">
+					<div class="comment-header avatar-content-left-arrow" role="heading" aria-level="3">
 						<div class="comment-header-left">
 							{{if .Issue.OriginalAuthor}}
 								<span class="text black tw-font-semibold">
@@ -78,7 +78,7 @@
 						{{ctx.AvatarUtils.Avatar .SignedUser 40}}
 					</a>
 					<div class="content">
-						<div class="ui segment">
+						<div class="ui segment avatar-content-left-arrow">
 							<form class="ui form form-fetch-action" id="comment-form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/comments" method="post">
 								{{template "repo/issue/comment_tab" .}}
 								{{.CsrfTokenHtml}}

templates/repo/issue/view_content/pull_merge_box.tmpl

@@ -38,7 +38,7 @@
 		</div>
 		{{end}}
 		{{$showGeneralMergeForm := false}}
-		<div class="ui attached segment merge-section {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
+		<div class="ui attached segment merge-section {{if not $.LatestCommitStatus}}avatar-content-left-arrow{{end}} flex-items-block">
 			{{if .Issue.PullRequest.HasMerged}}
 				{{if .IsPullBranchDeletable}}
 					<div class="item item-section text tw-flex-1">

templates/repo/issue/view_title.tmpl

@@ -12,7 +12,7 @@
 <div class="issue-title-header">
 	{{$canEditIssueTitle := and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 	<div class="issue-title" id="issue-title-display">
-		<h1 class="tw-break-anywhere">
+		<h1>
 			{{ctx.RenderUtils.RenderIssueTitle .Issue.Title $.Repository}}
 			<span class="index">#{{.Issue.Index}}</span>
 		</h1>

templates/shared/user/avatarlink.tmpl

@@ -1 +1 @@
-<a class="avatar"{{if gt .user.ID 0}} href="{{.user.HomeLink}}"{{end}}>{{ctx.AvatarUtils.Avatar .user}}</a>
+<a class="avatar-with-link" {{if gt .user.ID 0}}href="{{.user.HomeLink}}"{{end}}>{{ctx.AvatarUtils.Avatar .user}}</a>

tests/integration/pull_create_test.go

@@ -163,10 +163,10 @@ func TestPullCreate_TitleEscape(t *testing.T) {
 		req = NewRequest(t, "GET", url)
 		resp = session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc = NewHTMLParser(t, resp.Body)
-		titleHTML, err := htmlDoc.doc.Find(".comment-list .timeline-item.event .text b").First().Html()
+		titleHTML, err := htmlDoc.doc.Find(".comment-list .timeline-item.event .comment-text-line b").First().Html()
 		assert.NoError(t, err)
 		assert.Equal(t, "<strike>&lt;i&gt;XSS PR&lt;/i&gt;</strike>", titleHTML)
-		titleHTML, err = htmlDoc.doc.Find(".comment-list .timeline-item.event .text b").Next().Html()
+		titleHTML, err = htmlDoc.doc.Find(".comment-list .timeline-item.event .comment-text-line b").Next().Html()
 		assert.NoError(t, err)
 		assert.Equal(t, "&lt;u&gt;XSS PR&lt;/u&gt;", titleHTML)
 	})

tests/integration/timetracking_test.go

@@ -56,7 +56,7 @@ func testViewTimetrackingControls(t *testing.T, session *TestSession, user, repo
 		resp = session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc = NewHTMLParser(t, resp.Body)
 
-		events := htmlDoc.doc.Find(".event > span.text")
+		events := htmlDoc.doc.Find(".event > .comment-text-line")
 		assert.Contains(t, events.Last().Text(), "started working")
 
 		AssertHTMLElement(t, htmlDoc, ".issue-stop-time", true)
@@ -74,7 +74,7 @@ func testViewTimetrackingControls(t *testing.T, session *TestSession, user, repo
 		resp = session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc = NewHTMLParser(t, resp.Body)
 
-		events = htmlDoc.doc.Find(".event > span.text")
+		events = htmlDoc.doc.Find(".event > .comment-text-line")
 		assert.Contains(t, events.Last().Text(), "worked for ")
 	} else {
 		session.MakeRequest(t, reqStart, http.StatusNotFound)

web_src/css/base.css

@@ -38,7 +38,7 @@
   --font-size-label: 12px; /* font size of individual labels */
 
   --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */
-  --gap-block: 0.25rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
+  --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */
 }
 
 @media (min-width: 768px) and (max-width: 1200px) {
@@ -1069,7 +1069,9 @@ table th[data-sortt-desc] .svg {
 .btn,
 .ui.ui.button,
 .ui.ui.dropdown,
-.flex-text-inline {
+.flex-text-inline,
+.flex-text-inline > a,
+.flex-text-inline > span {
   display: inline-flex;
   align-items: center;
   gap: var(--gap-inline);

web_src/css/modules/comment.css

@@ -56,10 +56,6 @@
   min-width: 0;
 }
 
-.ui.comments .comment > .avatar ~ .content {
-  margin-left: 12px;
-}
-
 .ui.comments .comment .author {
   font-size: 1em;
   font-weight: var(--font-weight-medium);