feat: move topic labels https://github.com/NodeBB/NodeBB/issues/8717

less/topic.less

@@ -36,6 +36,13 @@
 			text-transform: initial;
 		}
 	}
+
+	[component="topic/labels"] {
+		vertical-align: -3px;
+		font-size: 16px;
+		color: @text-muted;
+	}
+
 	[component="topic/browsing-users"] {
 		margin-bottom: -15px;
 	}
@@ -236,7 +243,7 @@
 
 	.stats {
 		font-size: 12px;
-		margin: 0px 5px 0px 5px;
+		margin: 0px 2px 0px 2px;
 		display: inline-block;
 	}
 

templates/topic.tpl

@@ -1,4 +1,3 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
 <div data-widget-area="header">
 	{{{each widgets.header}}}
 	{{widgets.header.html}}
@@ -8,14 +7,17 @@
 	<div class="topic <!-- IF widgets.sidebar.length -->col-lg-9 col-sm-12<!-- ELSE -->col-lg-12<!-- ENDIF widgets.sidebar.length -->">
 		<div class="topic-header">
 			<h1 component="post/header" class="" itemprop="name">
-				<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
-				<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
-				<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
-				{{{each icons}}}@value{{{end}}}
 				<span class="topic-title" component="topic/title">{title}</span>
 			</h1>
 
 			<div class="topic-info clearfix">
+				<div component="topic/labels" class="inline-block">
+					<i component="topic/pinned" class="pull-left fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->" title="[[topic:pinned]]"></i>
+					<i component="topic/locked" class="pull-left fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->" title="[[topic:locked]]"></i>
+					<i class="pull-left fa fa-arrow-circle-right <!-- IF !oldCid -->hidden<!-- ENDIF !oldCid -->" title="[[topic:moved]]"></i>
+					{{{each icons}}}@value{{{end}}}
+				</div>
+
 				<div class="category-item inline-block">
 					{{{ if category.icon }}}
 					<div role="presentation" class="icon pull-left" style="{{{ if category.bgColor }}}background-color: {category.bgColor};{{{end}}}; {{{ if category.color}}}color: {category.color};{{{end}}}">