From 370fa6b18aa080c3ff6fefc1483c05320bc152b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Mon, 16 Feb 2026 16:44:52 -0500
Subject: [PATCH] make dropdown buttons fill their container

---
 install/package.json                             |  4 ++--
 .../category/filter-dropdown-content.tpl         |  2 +-
 src/views/partials/category/sort.tpl             |  2 +-
 .../partials/category/tools-dropdown-content.tpl |  2 +-
 src/views/partials/category/watch.tpl            |  2 +-
 .../partials/tags/filter-dropdown-content.tpl    |  2 +-
 src/views/partials/tags/watch.tpl                |  2 +-
 src/views/partials/topic-filters.tpl             | 16 ++++++++++++++++
 src/views/partials/topic-terms.tpl               | 16 ++++++++++++++++
 .../partials/users/filter-dropdown-content.tpl   |  2 +-
 10 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 src/views/partials/topic-filters.tpl
 create mode 100644 src/views/partials/topic-terms.tpl

diff --git a/install/package.json b/install/package.json
index 084e038727..873a3d1b66 100644
--- a/install/package.json
+++ b/install/package.json
@@ -107,10 +107,10 @@
         "nodebb-plugin-spam-be-gone": "2.3.2",
         "nodebb-plugin-web-push": "0.7.6",
         "nodebb-rewards-essentials": "1.0.2",
-        "nodebb-theme-harmony": "2.2.12",
+        "nodebb-theme-harmony": "2.2.13",
         "nodebb-theme-lavender": "7.1.21",
         "nodebb-theme-peace": "2.2.51",
-        "nodebb-theme-persona": "14.2.6",
+        "nodebb-theme-persona": "14.2.7",
         "nodebb-widget-essentials": "7.0.42",
         "nodemailer": "8.0.1",
         "nprogress": "0.2.0",
diff --git a/src/views/partials/category/filter-dropdown-content.tpl b/src/views/partials/category/filter-dropdown-content.tpl
index 19422fe6e6..8e92c5d7cf 100644
--- a/src/views/partials/category/filter-dropdown-content.tpl
+++ b/src/views/partials/category/filter-dropdown-content.tpl
@@ -1,4 +1,4 @@
-<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     {{{ if selectedCategory }}}
     <span class="category-item d-inline-flex align-items-center gap-1">
         {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
diff --git a/src/views/partials/category/sort.tpl b/src/views/partials/category/sort.tpl
index c1952e6e71..757f804ffc 100644
--- a/src/views/partials/category/sort.tpl
+++ b/src/views/partials/category/sort.tpl
@@ -1,5 +1,5 @@
 <div class="dropdown bottom-sheet" component="thread/sort">
-	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:topic-sort-option, {sortOptionLabel}]]">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:topic-sort-option, {sortOptionLabel}]]">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">{sortOptionLabel}</span>
 	</button>
diff --git a/src/views/partials/category/tools-dropdown-content.tpl b/src/views/partials/category/tools-dropdown-content.tpl
index 695735e29c..3dfa6bdabc 100644
--- a/src/views/partials/category/tools-dropdown-content.tpl
+++ b/src/views/partials/category/tools-dropdown-content.tpl
@@ -1,4 +1,4 @@
-<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 	<i class="fa fa-fw fa-gear text-primary"></i>
 	<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread-tools.title]]</span>
 	<span component="topic/selected/badge" class="badge rounded-pill bg-secondary"></span>
diff --git a/src/views/partials/category/watch.tpl b/src/views/partials/category/watch.tpl
index 66a2dce28e..195386b46f 100644
--- a/src/views/partials/category/watch.tpl
+++ b/src/views/partials/category/watch.tpl
@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
 <div class="dropdown bottom-sheet" component="topic/watch">
-	<button class="btn btn-ghost btn-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-ghost btn-sm ff-secondary dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="category/watching/menu" class="d-flex gap-2 align-items-center {{{ if !./isWatched }}} hidden{{{ end }}}"><i class="fa fa-fw fa-bell-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:watching]]</span></span>
 
 		<span component="category/tracking/menu"  class="d-flex gap-2 align-items-center {{{ if !./isTracked }}} hidden{{{ end }}}"><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold">[[category:tracking]]</span></span>
diff --git a/src/views/partials/tags/filter-dropdown-content.tpl b/src/views/partials/tags/filter-dropdown-content.tpl
index 1cd6734b75..acdfbbfc15 100644
--- a/src/views/partials/tags/filter-dropdown-content.tpl
+++ b/src/views/partials/tags/filter-dropdown-content.tpl
@@ -1,4 +1,4 @@
-<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center ff-secondary gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
     {{{ if selectedTag }}}
     <span class="d-inline-flex align-items-center gap-1">
         <i class="fa fa-fw fa-tags text-primary"></i>
diff --git a/src/views/partials/tags/watch.tpl b/src/views/partials/tags/watch.tpl
index 41545d5e34..75f5ebbb3c 100644
--- a/src/views/partials/tags/watch.tpl
+++ b/src/views/partials/tags/watch.tpl
@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
 <div class="dropdown bottom-sheet" component="tag/watch">
-	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="tag/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa fa-fw fa-bell-o text-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[tags:watching]]</span>
diff --git a/src/views/partials/topic-filters.tpl b/src/views/partials/topic-filters.tpl
new file mode 100644
index 0000000000..0dc3cd4669
--- /dev/null
+++ b/src/views/partials/topic-filters.tpl
@@ -0,0 +1,16 @@
+<div class="dropdown bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-fw fa-filter text-primary"></i>
+		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedFilter.name}</span>
+	</button>
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		{{{each filters}}}
+		<li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{filters.url}">
+				<div class="flex-grow-1">{filters.name}</div>
+				<i class="flex-shrink-0 fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>
+			</a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>
\ No newline at end of file
diff --git a/src/views/partials/topic-terms.tpl b/src/views/partials/topic-terms.tpl
new file mode 100644
index 0000000000..da7c2abd7b
--- /dev/null
+++ b/src/views/partials/topic-terms.tpl
@@ -0,0 +1,16 @@
+<div class="dropdown bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-fw fa-clock text-primary"></i>
+		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTerm.name}</span>
+	</button>
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		{{{each terms}}}
+		<li role="presentation" class="category">
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menuitem" href="{config.relative_path}/{terms.url}">
+				<div class="flex-grow-1">{terms.name}</div>
+				<i class="flex-shrink-0 fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>
+			</a>
+		</li>
+		{{{end}}}
+	</ul>
+</div>
\ No newline at end of file
diff --git a/src/views/partials/users/filter-dropdown-content.tpl b/src/views/partials/users/filter-dropdown-content.tpl
index e3ab5116d4..e639059b2d 100644
--- a/src/views/partials/users/filter-dropdown-content.tpl
+++ b/src/views/partials/users/filter-dropdown-content.tpl
@@ -1,4 +1,4 @@
-<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle h-100" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 	{{{ if selectedUser }}}
 	<span class="fw-semibold">{buildAvatar(selectedUser, "20px", true, "not-responsive")} {selectedUser.username}</span>
 	{{{ else }}}