From 6aece6893bdf684dc834038247fa94ce3c5f3c9c Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Fri, 8 Mar 2024 12:32:57 -0500
Subject: [PATCH] fix: update styling of available nav items in ACP

---
 public/scss/admin/general/navigation.scss |  8 --------
 src/views/admin/settings/navigation.tpl   | 25 +++++++++++++++--------
 2 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/public/scss/admin/general/navigation.scss b/public/scss/admin/general/navigation.scss
index 7233458abe..ce33850c7b 100644
--- a/public/scss/admin/general/navigation.scss
+++ b/public/scss/admin/general/navigation.scss
@@ -33,14 +33,6 @@
 	#available {
 		.drag-item {
 			cursor: move;
-			margin-right: 10px;
-			padding: 8px 10px;
-			margin-bottom: 5px;
-		}
-
-		p {
-			line-height: 20px;
-			min-height: 40px;
 		}
 	}
 
diff --git a/src/views/admin/settings/navigation.tpl b/src/views/admin/settings/navigation.tpl
index 431b052361..b9443098f2 100644
--- a/src/views/admin/settings/navigation.tpl
+++ b/src/views/admin/settings/navigation.tpl
@@ -122,8 +122,8 @@
 				<div class="card-header">[[admin/settings/navigation:available-menu-items]]</div>
 				<div class="card-body">
 					<ul id="available">
-						<li data-id="custom" class="clearfix">
-							<div data-id="custom" class="drag-item alert alert-success float-start">
+						<li data-id="custom" class="clearfix d-flex align-items-center gap-3 mb-3">
+							<div data-id="custom" class="drag-item alert p-2 mb-0 alert-success">
 								<i class="fa fa-fw fa-plus-circle"></i>
 							</div>
 							<p>
@@ -131,14 +131,23 @@
 							</p>
 						</li>
 						{{{ each available }}}
-						<li data-id="{@index}" class="clearfix">
-							<div data-id="{@index}" class="drag-item alert {{{ if available.core }}}alert-warning{{{ else }}}alert-info{{{ end }}} float-start">
+						<li data-id="{@index}" class="clearfix d-flex align-items-center gap-3 mb-3">
+							<div data-id="{@index}" class="drag-item alert p-2 mb-0 {{{ if available.core }}}alert-warning{{{ else }}}alert-info{{{ end }}}">
 								<i class="fa fa-fw {{{ if available.iconClass }}}{available.iconClass}{{{ else }}}fa-navicon{{{ end }}}"></i>
 							</div>
-							<p>
-								<strong>{available.text}</strong> {available.route} <br/>
-								{{{ if available.core }}} [[admin/settings/navigation:core]] {{{ else }}} [[admin/settings/navigation:plugin]] {{{ end }}}
-							</p>
+							<div class="d-flex flex-column">
+								<p class="mb-0">
+									<strong>{available.text}</strong>
+								</p>
+								<p class="mb-0">
+									{{{ if available.core }}}
+									<span class="badge bg-primary-subtle text-primary">[[admin/settings/navigation:core]]</span>
+									{{{ else }}}
+									<span class="badge bg-secondary-subtle text-secondary">[[admin/settings/navigation:plugin]]</span>
+									{{{ end }}}
+									<span class="badge text-bg-none"><code>{available.route}</code></span>
+								</p>
+							</div>
 						</li>
 						{{{ end }}}
 					</ul>