nodebb-theme-harmony 1.0.0-beta.3 → 1.0.0-beta.31

package/templates/partials/{category-filter-content.tpl → category/filter-dropdown-content.tpl}

@@ -1,7 +1,7 @@
 <button type="button" class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item">
-        {buildCategoryIcon(selectedCategory, "20px", "rounded-circle")}
+        {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}
         <span class="visible-md-inline visible-lg-inline fw-semibold">{selectedCategory.name}</span>
     </span>
     {{{ else }}}
@@ -9,18 +9,20 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-    <li role="presentation" class="category" data-all="all">
-        <a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    <li role="presentation" class="category" data-cid="all">
+        <a class="dropdown-item" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
     </li>
     {{{each categoryItems}}}
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
         <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
             <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-block">
+                    {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {{{ end }}}
                     {./name}
                 </div>
             </span>

package/templates/partials/{category-selector-content.tpl → category/selector-dropdown-content.tpl}

@@ -12,7 +12,7 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li component="category/no-matches" role="presentation" class="category hidden">

package/templates/partials/category/subcategory.tpl

@@ -1,7 +1,7 @@
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
-	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
+	<div class="mb-2"><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 	{{{ else }}}
 	<h3 class="fs-6 fw-semibold">[[category:subcategories]]</h3>
 	{{{ end }}}

package/templates/partials/category/tags.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{ each tags }}}
 <a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
 {{{ end }}}

package/templates/partials/category/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group bottom-sheet" component="topic/watch">
 	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
@@ -9,11 +9,35 @@
 	</button>
 
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text text-muted"><small>[[category:watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/watching" data-state="watching">
+				<span><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-inbox"></i> [[category:watching]]</span>
+					<p class="help-text text-muted"><small>[[category:watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/notwatching" data-state="notwatching">
+				<span><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]</span>
+					<p class="help-text text-muted"><small>[[category:not-watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="category/ignoring" data-state="ignoring">
+				<span><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]</span>
+					<p class="help-text text-muted"><small>[[category:ignoring.description]]</small></p>
+				</div>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/chats/message-window.tpl

@@ -6,8 +6,9 @@
 
 {{{ if roomId }}}
 <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
-	<div component="chat/header" class="d-flex align-items-center px-3 gap-1">
-		<h5 class="members flex-1 fw-semibold tracking-tight">
+	<div component="chat/header" class="d-flex align-items-center px-3 gap-2">
+		<a href="#" data-action="close" role="button" class="d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
+		<h5 class="members flex-1 fw-semibold tracking-tight mb-0">
 			{./chatWithMessage}
 		</h5>
 

package/templates/partials/chats/message.tpl

@@ -14,7 +14,7 @@
 		{{{ end }}}
 	</div>
 	<div class="message-body-wrapper hover-parent">
-		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto">
+		<div component="chat/message/body" class="message-body ps-0 py-0 overflow-auto text-break">
 			{messages.content}
 		</div>
 

package/templates/partials/cookie-consent.tpl

@@ -1,6 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="cookie-consent">
-    <button class="float-end btn btn-primary">{dismiss}</button>
-    {message} <a target="_blank" rel="noopener" href="{link_url}">{link}</a>
+<div class="d-flex justify-content-center position-fixed start-0 bottom-0 w-100 mb-5 mb-md-0">
+    <div class="cookie-consent text-bg-info w-50 p-3 rounded d-flex gap-2 mb-5 mb-md-3 justify-content-between align-items-center">
+        <span>{message} <a class="fw-bold" target="_blank" rel="noopener" href="{link_url}">{link}</a></span>
+        <button class="btn btn-primary text-nowrap">{dismiss}</button>
+    </div>
 </div>

package/templates/partials/flags/filters.tpl

@@ -30,7 +30,7 @@
 				<div class="mb-3">
 					<label class="form-label" for="filter-cid">[[flags:filter-cid]]</label>
 					<div class="input-group">
-					<!-- IMPORT partials/category-filter.tpl -->
+					<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 					</div>
 				</div>
 				<div class="mb-3">

package/templates/partials/groups/admin.tpl

@@ -82,7 +82,7 @@
 			<label class="form-label" for="memberPostCids">[[groups:details.member-post-cids]]</label>
 			<div class="d-flex gap-1">
 				<div class="member-post-cids-selector">
-					<!-- IMPORT partials/category-selector.tpl -->
+					<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 				</div>
 				<input id="memberPostCids" type="text" class="form-control" value="{group.memberPostCids}">
 			</div>

package/templates/partials/groups/badge.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>
+<a href="{config.relative_path}/groups/{./slug}" class="badge rounded-1 text-uppercase text-truncate text-decoration-none" style="max-width: 150px;color:{./textColor};background-color: {./labelColor};"><i class="fa {{{ if ./icon }}}{./icon}{{{ if ./userTitle}}} me-1{{{ end }}}{{{else}}}hidden{{{ end }}}"></i><span class="badge-text align-text-bottom">{{{ if ./userTitle }}}{./userTitle}{{{ end }}}</span></a>

package/templates/partials/groups/sidebar-left.tpl

@@ -1,5 +1,5 @@
 <div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
-	<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
+	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-1">[[global:posts]]</div>
 		</button>

package/templates/partials/mobile-footer.tpl

@@ -1,70 +1,78 @@
-<div class="text-dark bg-light bottombar p-2 d-flex d-md-none justify-content-between fixed-bottom ff-secondary align-items-center">
-	<div class="bottom-sheet">
-		<button class="btn" data-bs-toggle="dropdown">
-			<i class="fa fa-bars"></i>
-		</button>
-		<ul class="dropdown-menu">
-			{{{ each navigation }}}
-			<!-- IF function.displayMenuItem, @index -->
-			<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
-				<a class="nav-link nav-btn navigation-link p-3 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
-				{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
-					<span class="d-inline-flex justify-content-between align-items-center w-100">
-						<span class="text-nowrap truncate-open">
-							{{{ if ./iconClass }}}
-							<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
-							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
-							{{{ end }}}
+<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary  gap-1 align-items-center">
+
+	<!-- IMPORT partials/topic/navigator-mobile.tpl -->
+
+	<div class="bottombar p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
+		<div class="">
+			<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
+				<span class="position-relative">
+					<i class="fa fa-fw fa-lg fa-bars"></i>
+					<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
+				</span>
+			</a>
+			<ul class="navigation-dropdown dropdown-menu">
+				{{{ each navigation }}}
+				<!-- IF function.displayMenuItem, @index -->
+				<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+					<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+					{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+						<span class="d-inline-flex justify-content-between align-items-center w-100">
+							<span class="text-nowrap truncate-open">
+								{{{ if ./iconClass }}}
+								<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+								{{{ end }}}
+								{{{ if navigation.text }}}
+								<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
+								{{{ end }}}
+							</span>
+							<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
 						</span>
-						<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
-					</span>
-				</a>
-				{{{ if navigation.dropdown }}}
-				<div class="ps-3">
-					<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
-						{navigation.dropdownContent}
-					</ul>
-				</div>
-				{{{ end }}}
-			</li>
-			<!-- ENDIF function.displayMenuItem -->
-			{{{end}}}
-		</ul>
-	</div>
+					</a>
+					{{{ if navigation.dropdown }}}
+					<div class="ps-3">
+						<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
+							{navigation.dropdownContent}
+						</ul>
+					</div>
+					{{{ end }}}
+				</li>
+				<!-- ENDIF function.displayMenuItem -->
+				{{{end}}}
+			</ul>
+		</div>
 
-	<div class="">
-		{{{ if config.loggedIn }}}
-		<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
-			{{{ if config.searchEnabled }}}
-			<li component="sidebar/search" class="nav-item m-0 search bottom-sheet position-relative">
-			<!-- IMPORT partials/sidebar/search-mobile.tpl -->
-			</li>
-			{{{ end }}}
+		<div class="">
+			{{{ if config.loggedIn }}}
+			<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
+				{{{ if config.searchEnabled }}}
+				<li component="sidebar/search" class="nav-item m-0 search">
+				<!-- IMPORT partials/sidebar/search-mobile.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="notifications" class="nav-item m-0 notifications bottom-sheet">
-			<!-- IMPORT partials/sidebar/notifications.tpl -->
-			</li>
+				<li component="notifications" class="nav-item m-0 notifications">
+				<!-- IMPORT partials/sidebar/notifications.tpl -->
+				</li>
 
-			{{{ if canChat }}}
-			<li class="nav-item m-0 chats bottom-sheet">
-			<!-- IMPORT partials/sidebar/chats.tpl -->
-			</li>
-			{{{ end }}}
+				{{{ if canChat }}}
+				<li class="nav-item m-0 chats">
+				<!-- IMPORT partials/sidebar/chats.tpl -->
+				</li>
+				{{{ end }}}
 
-			<li component="sidebar/drafts" class="nav-item m-0 drafts bottom-sheet">
-			<!-- IMPORT partials/sidebar/drafts.tpl -->
-			</li>
+				<li component="sidebar/drafts" class="hidden nav-item m-0 drafts">
+				<!-- IMPORT partials/sidebar/drafts.tpl -->
+				</li>
 
-			<li id="user_label" class="nav-item m-0 py-2 bottom-sheet usermenu">
-			<!-- IMPORT partials/sidebar/user-menu.tpl -->
-			</li>
-		</ul>
-		{{{ else }}}
-		<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
-			<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
-		</ul>
-		{{{ end }}}
+				<li id="user_label" class="nav-item m-0 py-2 usermenu">
+				<!-- IMPORT partials/sidebar/user-menu.tpl -->
+				</li>
+			</ul>
+			{{{ else }}}
+			<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
+				<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+			</ul>
+			{{{ end }}}
+		</div>
 	</div>
 </div>

package/templates/partials/paginator.tpl

@@ -1,45 +1,45 @@
 <div component="pagination" class="pagination-container mt-3{{{ if !pagination.pages.length }}} hidden{{{ end }}}">
 	<ul class="pagination pagination-sm gap-1 hidden-xs hidden-sm justify-content-center">
 		<li class="page-item previous float-start{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		{{{each pagination.pages}}}
 			{{{ if pagination.pages.separator }}}
 			<li component="pagination/select-page" class="page-item page select-page">
-				<a class="page-link rounded fw-secondary text-reset px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
+				<a class="page-link rounded fw-secondary px-3" href="#"><i class="fa fa-ellipsis-h"></i></a>
 			</li>
 			{{{ else }}}
 			<li class="page-item page{{{ if pagination.pages.active }}} active{{{ end }}}" >
-				<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
+				<a class="page-link rounded fw-secondary px-3" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
 			</li>
 			{{{ end }}}
 		{{{end}}}
 
 		<li class="page-item next float-end {{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link rounded fw-secondary text-reset px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link rounded fw-secondary px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>
 
 	<ul class="pagination pagination-sm hidden-md hidden-lg justify-content-center">
 		<li class="page-item first{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
+			<a class="page-link fw-secondary  href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
 		</li>
 
 		<li class="page-item previous{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+			<a class="page-link fw-secondary  href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		<li component="pagination/select-page" class="page-item page select-page">
-			<a class="page-link fw-secondary text-reset" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
+			<a class="page-link fw-secondary  href="#">{pagination.currentPage} / {pagination.pageCount}</a>
 		</li>
 
 		<li class="page-item next{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+			<a class="page-link fw-secondary  href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 
 		<li class="page-item last{{{ if !pagination.next.active }}} disabled{{{ end }}}">
-			<a class="page-link fw-secondary text-reset" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
+			<a class="page-link fw-secondary  href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
 		</li>
 	</ul>
 </div>

package/templates/partials/post_bar.tpl

@@ -16,10 +16,11 @@
 			<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
 			{{{ end }}}
 
-			<span class="loading-indicator btn float-start text-muted navbar-text hidden" done="0">
-				<i class="fa fa-refresh fa-spin"></i>
-				<span class="hidden-xs">[[topic:loading_more_posts]]</span>
-			</span>
+			{{{ if browsingUsers }}}
+			<div class="hidden-xs">
+			<!-- IMPORT partials/topic/browsing-users.tpl -->
+			</div>
+			{{{ end }}}
 		</ul>
 		<!-- IMPORT partials/topic/reply-button.tpl -->
 	</div>

package/templates/partials/posts_list_item.tpl

@@ -1,19 +1,19 @@
 <hr/>
-<a class="topic-title fw-semibold fs-5 text-reset" href="{config.relative_path}/post/{./pid}">
+<a class="d-inline-block topic-title fw-semibold fs-5 mb-3 text-reset text-break" href="{config.relative_path}/post/{./pid}">
     {{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
 </a>
 <li component="post" class="posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
     <div class="post-body d-flex flex-column gap-1">
         <div class="d-flex gap-3 post-info">
             <div class="post-author d-flex gap-1">
-                <a class="lh-1" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+                <a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
                 <a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
             </div>
-            <span class="timeago text-sm text-muted" title="{../timestampISO}"></span>
+            <span class="timeago text-sm text-muted" title="{./timestampISO}"></span>
         </div>
 
-        <div component="post/content" class="content text-sm">
-            {../content}
+        <div component="post/content" class="content text-sm text-break">
+            {./content}
         </div>
     </div>
 </li>

package/templates/partials/quick-search-results.tpl

@@ -9,7 +9,7 @@
 </div>
 {{{ end }}}
 
-<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto" style="max-width:400px; max-height: 500px;">
+<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto overscroll-behavior-contain" style="max-width:  400px; max-height: 500px;">
 	<li role="separator" class="dropdown-divider d-none d-md-block"></li>
 	{{{ each posts }}}
 	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">