fix: closes #12474, fix search dropdown on mobile for merge

add remove topic buttons

install/package.json

@@ -103,10 +103,10 @@
         "nodebb-plugin-ntfy": "1.7.4",
         "nodebb-plugin-spam-be-gone": "2.2.2",
         "nodebb-rewards-essentials": "1.0.0",
-        "nodebb-theme-harmony": "1.2.49",
+        "nodebb-theme-harmony": "1.2.50",
         "nodebb-theme-lavender": "7.1.8",
         "nodebb-theme-peace": "2.2.4",
-        "nodebb-theme-persona": "13.3.14",
+        "nodebb-theme-persona": "13.3.15",
         "nodebb-widget-essentials": "7.0.15",
         "nodemailer": "6.9.13",
         "nprogress": "0.2.0",

public/src/client/topic/merge.js

@@ -38,10 +38,22 @@ define('forum/topic/merge', ['search', 'alerts', 'api'], function (search, alert
 				searchOptions: {
 					in: 'titles',
 				},
+				dropdown: {
+					maxWidth: '400px',
+					maxHeight: '350px',
+				},
 			});
 			modal.on('click', '[data-tid]', function () {
-				if ($(this).attr('data-tid')) {
+				const addTid = $(this).attr('data-tid');
-					Merge.addTopic($(this).attr('data-tid'));
+				if (addTid) {
+					Merge.addTopic(addTid);
+				}
+				return false;
+			});
+			modal.on('click', '[data-remove-tid]', function () {
+				const removeTid = $(this).attr('data-remove-tid');
+				if (removeTid) {
+					Merge.removeTopic(removeTid);
 				}
 				return false;
 			});
@@ -65,6 +77,14 @@ define('forum/topic/merge', ['search', 'alerts', 'api'], function (search, alert
 		}).catch(alerts.error);
 	};
 
+	Merge.removeTopic = function (tid) {
+		if (selectedTids[tid]) {
+			delete selectedTids[tid];
+		}
+		checkButtonEnable();
+		showTopicsSelected();
+	};
+
 	function onTopicClicked(ev) {
 		if (!modal) {
 			return;
@@ -116,10 +136,13 @@ define('forum/topic/merge', ['search', 'alerts', 'api'], function (search, alert
 				topics: topics,
 			}, function (html) {
 				modal.find('.topics-section').html(html.find('.topics-section').html());
-				modal.find('.merge-main-topic-select').html(html.find('.merge-main-topic-select').html());
+				modal.find('.merge-main-topic-select').html(
+					html.find('.merge-main-topic-select').html()
+				);
 			});
 		} else {
 			modal.find('.topics-section').translateHtml('[[error:no-topics-selected]]');
+			modal.find('.merge-main-topic-select').html('');
 		}
 	}
 

public/src/modules/search.js

@@ -136,6 +136,7 @@ define('search', [
 						text.slice(start, start + 80) +
 						(text.length - start > 80 ? '...' : ''));
 				});
+				data.dropdown = { maxWidth: '400px', maxHeight: '500px', ...options.dropdown };
 				app.parseAndTranslate('partials/quick-search-results', data, function (html) {
 					if (html.length) {
 						html.find('.timeago').timeago();

src/views/modals/merge-topic.tpl

@@ -1,10 +1,5 @@
 <div class="tool-modal d-flex">
-	<div class="position-relative">
+
-		<div class="quick-search-container dropdown-menu d-block p-2 hidden" style="right: 10px;">
-			<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
-			<div class="quick-search-results-container"></div>
-		</div>
-	</div>
 
 	<div class="card shadow">
 		<h5 class="card-header">[[topic:thread-tools.merge-topics]]</h5>
@@ -17,13 +12,23 @@
 					<input class="form-control topic-search-input" type="text">
 					<span class="input-group-text"><i class="fa fa-search"></i></span>
 				</div>
+
+				<div class="quick-search-container dropdown-menu d-block p-2 hidden">
+					<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
+					<div class="quick-search-results-container"></div>
+				</div>
 			</p>
 
 			<p><strong>[[topic:merge-topic-list-title]]</strong></p>
 			<ul class="topics-section">
-				{{{each topics}}}
+				{{{ each topics }}}
-				<li><a href="{config.relative_path}/topic/{topics.tid}"><strong>{topics.title}</strong></a></li>
+				<li class="mb-1">
-				{{{end}}}
+					<div class="d-flex justify-content-between align-items-center gap-2">
+						<a href="{config.relative_path}/topic/{./tid}"><strong>{./title}</strong></a>
+						<button class="btn btn-sm btn-light" data-remove-tid="{./tid}"><i class="fa fa-times text-danger"></i></button>
+					</div>
+				</li>
+				{{{ end }}}
 			</ul>
 			<p>
 				<strong>[[topic:merge-options]]</strong>
@@ -34,9 +39,9 @@
 				</p>
 				<p>
 					<select class="form-select merge-main-topic-select">
-						{{{each topics}}}
+						{{{ each topics }}}
 						<option value="{topics.tid}">{topics.title}</option>
-						{{{end}}}
+						{{{ end }}}
 					</select>
 				</p>
 				<p>