Fix comment header padding (#33377)

templates/repo/diff/comments.tmpl

@@ -8,7 +8,7 @@
 		{{template "shared/user/avatarlink" dict "user" .Poster}}
 	{{end}}
 	<div class="content comment-container">
-		<div class="ui top attached header comment-header tw-flex tw-items-center tw-justify-between">
+		<div class="comment-header">
 			<div class="comment-header-left tw-flex tw-items-center">
 				{{if .OriginalAuthor}}
 					<span class="text black tw-font-semibold tw-mr-1">

templates/repo/issue/view_content.tmpl

@@ -13,7 +13,7 @@
 				</a>
 				{{end}}
 				<div class="content comment-container">
-					<div class="ui top attached header comment-header tw-flex tw-items-center tw-justify-between" role="heading" aria-level="3">
+					<div class="comment-header" role="heading" aria-level="3">
 						<div class="comment-header-left tw-flex tw-items-center">
 							{{if .Issue.OriginalAuthor}}
 								<span class="text black tw-font-semibold">

templates/repo/issue/view_content/comments.tmpl

@@ -26,7 +26,7 @@
 				</a>
 			{{end}}
 				<div class="content comment-container">
-					<div class="ui top attached header comment-header tw-flex tw-items-center tw-justify-between" role="heading" aria-level="3">
+					<div class="comment-header" role="heading" aria-level="3">
 						<div class="comment-header-left tw-flex tw-items-center">
 							{{if .OriginalAuthor}}
 								<span class="text black tw-font-semibold tw-mr-1">
@@ -393,7 +393,7 @@
 				{{if or .Content .Attachments}}
 				<div class="timeline-item comment">
 					<div class="content comment-container">
-						<div class="ui top attached header comment-header tw-flex tw-items-center tw-justify-between">
+						<div class="comment-header">
 							<div class="comment-header-left tw-flex tw-items-center">
 								{{if gt .Poster.ID 0}}
 									<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
@@ -633,8 +633,8 @@
 				</div>
 				{{if .Content}}
 					<div class="timeline-item comment">
-						<div class="content">
+						<div class="content comment-container">
-							<div class="ui top attached header comment-header-left tw-flex tw-items-center arrow-top">
+							<div class="comment-header arrow-top">
 								{{if gt .Poster.ID 0}}
 									<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
 										{{ctx.AvatarUtils.Avatar .Poster 24}}
@@ -644,7 +644,7 @@
 									{{ctx.Locale.Tr "action.review_dismissed_reason"}}
 								</span>
 							</div>
-							<div class="ui attached segment">
+							<div class="ui attached segment comment-body">
 								<div class="render-content markup">
 									{{if .RenderedContent}}
 										{{.RenderedContent}}

templates/repo/issue/view_content/conversation.tmpl

@@ -57,7 +57,7 @@
 					{{$createdSubStr:= DateUtils.TimeSince .CreatedUnix}}
 					<div class="comment code-comment" id="{{.HashTag}}">
 						<div class="content comment-container">
-							<div class="header comment-header">
+							<div class="comment-header">
 								<div class="comment-header-left tw-flex tw-items-center">
 									{{if not .OriginalAuthor}}
 										<a class="avatar">

web_src/css/repo.css

@@ -1480,16 +1480,12 @@ td .commit-summary {
 }
 
 .comment-header {
-  border: none !important;
   background: var(--color-box-header);
-  border-bottom: 1px solid var(--color-secondary) !important;
+  border-bottom: 1px solid var(--color-secondary);
-  font-weight: var(--font-weight-normal) !important;
+  padding: 0 1rem;
-  padding: 0.5rem 1rem;
-  margin: 0 !important;
   position: relative;
   color: var(--color-text);
   min-height: 41px;
-  background-color: var(--color-box-header);
   display: flex;
   justify-content: space-between;
   align-items: center;