Comment Header fixes (#13356)

Apply more flexboxes on comment header and remove float hacks. Needs
1.13 backport.

Fixes: https://github.com/go-gitea/gitea/issues/13316

Co-authored-by: Lauris BH <lauris@nix.lv>

templates/repo/issue/view_content.tmpl

@@ -21,25 +21,27 @@
 			{{end}}
 				<div class="content">
 					<div class="ui top attached header">
-					{{if .Issue.OriginalAuthor }}
-						<span class="text black">
-							<i class="fa {{MigrationIcon .Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
-							{{ .Issue.OriginalAuthor }}
-						</span>
-						<span class="text grey">
-							{{ .i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe }}
-						</span>
-						<span class="text migrate">
-							{{if .Repository.OriginalURL}} ({{$.i18n.Tr "repo.migrated_from" .Repository.OriginalURL .Repository.GetOriginalURLHostname | Safe }}){{end}}
-						</span>
-					{{else}}
-						<span class="text grey">
-							<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
-							{{.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}}
-						</span>
-					{{end}}
-						{{if not $.Repository.IsArchived}}
-							<div class="ui right actions">
+						<div class="header-left df ac">
+							{{if .Issue.OriginalAuthor }}
+								<span class="text black">
+									<i class="fa {{MigrationIcon .Repository.GetOriginalURLHostname}}" aria-hidden="true"></i>
+									{{ .Issue.OriginalAuthor }}
+								</span>
+								<span class="text grey">
+									{{ .i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe }}
+								</span>
+								<span class="text migrate">
+									{{if .Repository.OriginalURL}} ({{$.i18n.Tr "repo.migrated_from" .Repository.OriginalURL .Repository.GetOriginalURLHostname | Safe }}){{end}}
+								</span>
+							{{else}}
+								<span class="text grey">
+									<a class="author"{{if gt .Issue.Poster.ID 0}} href="{{.Issue.Poster.HomeLink}}"{{end}}>{{.Issue.Poster.GetDisplayName}}</a>
+									{{.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}}
+								</span>
+							{{end}}
+						</div>
+						<div class="header-right actions df ac">
+							{{if not $.Repository.IsArchived}}
 								{{if gt .Issue.ShowTag 0}}
 									<div class="ui basic label">
 										{{if eq .Issue.ShowTag 2}}
@@ -51,8 +53,8 @@
 								{{end}}
 								{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}
 								{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" .Issue "delete" false "diff" false "IsCommentPoster" $.IsIssuePoster}}
-							</div>
-						{{end}}
+							{{end}}
+						</div>
 					</div>
 					<div class="ui attached segment">
 						<div class="render-content markdown">

templates/repo/issue/view_content/comments.tmpl

@@ -20,13 +20,15 @@
 		{{end}}
 			<div class="content">
 				<div class="ui top attached header">
-				{{if .OriginalAuthor }}
-					<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
-				{{else}}
-					<span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span>
-				{{end}}
-					{{if not $.Repository.IsArchived}}
-						<div class="ui right actions">
+					<div class="header-left df ac">
+						{{if .OriginalAuthor }}
+							<span class="text black"><i class="fa {{MigrationIcon $.Repository.GetOriginalURLHostname}}" aria-hidden="true"></i> {{ .OriginalAuthor }}</span><span class="text grey"> {{$.i18n.Tr "repo.issues.commented_at" .Issue.HashTag $createdStr | Safe}} {{if $.Repository.OriginalURL}}</span><span class="text migrate">({{$.i18n.Tr "repo.migrated_from" $.Repository.OriginalURL $.Repository.GetOriginalURLHostname | Safe }}){{end}}</span>
+						{{else}}
+							<span class="text grey"><a class="author"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>{{.Poster.GetDisplayName}}</a> {{$.i18n.Tr "repo.issues.commented_at" .HashTag $createdStr | Safe}}</span>
+						{{end}}
+					</div>
+					<div class="header-right actions df ac">
+						{{if not $.Repository.IsArchived}}
 							{{if eq .PosterID .Issue.PosterID }}
 								<div class="ui basic label">
 									{{$.i18n.Tr "repo.issues.poster"}}
@@ -43,8 +45,8 @@
 							{{end}}
 							{{template "repo/issue/view_content/add_reaction" Dict "ctx" $ "ActionURL" (Printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
 							{{template "repo/issue/view_content/context_menu" Dict "ctx" $ "item" . "delete" true "diff" false "IsCommentPoster" (and $.IsSigned (eq $.SignedUserID .PosterID))}}
-						</div>
-					{{end}}
+						{{end}}
+					</div>
 				</div>
 				<div class="ui attached segment">
 					<div class="render-content markdown">

web_src/less/_form.less

@@ -10,13 +10,9 @@
 .ui.attached.header {
   background: #f0f0f0;
 
-  .right {
-    margin-top: -5px;
-
-    .button {
-      padding: 8px 10px;
-      font-weight: normal;
-    }
+  .right .button {
+    padding: 8px 10px;
+    font-weight: normal;
   }
 }
 

web_src/less/_repository.less

@@ -1002,27 +1002,6 @@
       }
 
       .comment {
-
-        .actions {
-          .item {
-            float: left;
-
-            &.context {
-              float: none;
-            }
-
-            &.tag {
-              margin-right: 5px;
-            }
-
-            &.action {
-              margin-top: 6px;
-              padding-left: 10px;
-              padding-right: 3px;
-            }
-          }
-        }
-
         > .content {
           > div:first-child {
             border-top-left-radius: 4px;
@@ -1062,15 +1041,14 @@
               left: 7px;
             }
 
-            .actions {
-              display: flex;
-              padding: 0 .5rem;
-
-              &.right {
-                margin: 0;
-              }
+            .header-left > * + *,
+            .header-right > * + * {
+              margin-left: .25rem;
+            }
 
+            .actions {
               a {
+                padding: .5rem;
                 color: rgba(0, 0, 0, .4);
 
                 &:hover {