nodebb-theme-harmony 0.0.10 → 0.0.12

package/templates/account/following.tpl

@@ -1,10 +1,9 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			{{{ if !users.length }}}

package/templates/account/groups.tpl

@@ -1,10 +1,9 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			<div class="groups">

package/templates/account/info.tpl

@@ -1,10 +1,9 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			{{{ if sessions.length }}}
 			<div class="mb-3">
 				<h4>[[global:sessions]]</h4>
@@ -32,7 +31,7 @@
 			{{{ end }}}
 
 			<div class="row">
-				<div class="col-sm-6">
+				<div class="col-sm-6 mb-3">
 					<div class="card mb-3">
 						<h5 class="card-header">
 							[[global:recentips]]
@@ -78,7 +77,7 @@
 						</div>
 					</div>
 				</div>
-				<div class="col-sm-6">
+				<div class="col-sm-6 mb-3">
 					<div class="card mb-3">
 						<h5 class="card-header">
 							[[user:info.latest-flags]]

package/templates/account/posts.tpl

@@ -1,12 +1,12 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
-			<div class="d-flex justify-content-between align-items-center mb-3">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+			<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
 				<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
-				<div class="d-flex gap-1">
+				<div class="d-flex flex-wrap gap-1">
 					<a href="{config.relative_path}/user/{userslug}/posts" class="btn-ghost-sm fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
 					{{{ if !reputation:disabled }}}
 					<a href="{config.relative_path}/user/{userslug}/best"class="btn-ghost-sm fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>

package/templates/account/profile.tpl

@@ -1,10 +1,10 @@
 <div class="account mx-auto">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
 
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5">
 			{{{ if aboutme }}}
 			<div component="aboutme" class="text-sm">
 			{aboutmeParsed}
@@ -12,7 +12,7 @@
 			{{{ end }}}
 
 			<div class="account-stats container">
-				<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+				<div class="row row-cols-2 row-cols-xl-3 row-cols-xxl-4 g-2">
 					{{{ if !reputation:disabled }}}
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100">
@@ -31,7 +31,7 @@
 
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
-							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-cake-candles"></i> <span>[[user:joined]]</span></span>
+							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-user-plus"></i> <span>[[user:joined]]</span></span>
 							<span class="timeago fs-6 ff-secondary" title="{joindateISO}"></span>
 						</div>
 					</div>
@@ -39,7 +39,7 @@
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
 							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-clock"></i> <span>[[user:lastonline]]</span></span>
-							<span class="timeago fs-6 ff-secondary" title="{lastonlineISO}"></span>
+							<span class="timeago text-center text-break w-100 px-2 fs-6 ff-secondary" title="{lastonlineISO}"></span>
 						</div>
 					</div>
 
@@ -47,7 +47,7 @@
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
 							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-envelope"></i> <span>[[user:email]]</span> {{{ if emailHidden}}}<span class="text-lowercase">([[global:hidden]])</span>{{{ end }}}</span>
-							<span class="text-sm text-break ff-secondary">{email}</span>
+							<span class="text-sm text-center text-break w-100 px-2 ff-secondary">{email}</span>
 						</div>
 					</div>
 					{{{ end }}}
@@ -56,7 +56,7 @@
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
 							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-globe"></i> <span>[[user:website]]</span></span>
-							<a class="text-sm text-break ff-secondary text-underline text-reset" href="{websiteLink}" rel="nofollow noopener noreferrer">{websiteName}</a>
+							<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{websiteLink}" rel="nofollow noopener noreferrer">{websiteName}</a>
 						</div>
 					</div>
 					{{{ end }}}
@@ -65,7 +65,7 @@
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
 							<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-map-pin"></i> <span>[[user:location]]</span></span>
-							<span class="fs-6 ff-secondary">{location}</span>
+							<span class="text-center text-break w-100 px-2 fs-6 ff-secondary">{location}</span>
 						</div>
 					</div>
 					{{{ end }}}
@@ -73,7 +73,7 @@
 					{{{ if age }}}
 					<div class="stat">
 						<div class="align-items-center justify-content-center card card-header px-0 py-3 border-0 rounded-1 h-100 gap-2">
-							<span class="stat-label text-xs fw-semibold"><span>[[user:age]]</span></span>
+							<span class="stat-label text-xs fw-semibold"><span><i class="text-muted fa-solid fa-cake-candles"></i> [[user:age]]</span></span>
 							<span class="fs-6 ff-secondary">{age}</span>
 						</div>
 					</div>

package/templates/account/sessions.tpl

@@ -1,10 +1,9 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<p class="lead">[[user:sessions.description]]</p>
 			<hr />
 			<ul class="list-group" component="user/sessions">

package/templates/account/settings.tpl

@@ -1,212 +1,196 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
-			<div class="form-actions mb-3 d-flex justify-content-end sticky-lg-top" style="top: 1rem;">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+			<div class="mb-3 d-flex justify-content-between">
+				<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[pages:account/settings]]{{{ else }}}[[pages:account/settings-of, {username}]]{{{ end }}}</h3>
 				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>
 			</div>
 			<div class="row">
 				<div class="col-12 col-md-6">
-					<!-- IF !disableCustomUserSkins -->
-					<h4>[[user:select-skin]]</h4>
-					<div class="card card-body mb-3">
-						<select class="form-select" id="bootswatchSkin" data-property="bootswatchSkin">
+					{{{ if !disableCustomUserSkins }}}
+					<h6 class="fw-bold">[[user:select-skin]]</h6>
+					<div class="">
+						<select class="form-select form-select-sm" id="bootswatchSkin" data-property="bootswatchSkin">
 							{{{each bootswatchSkinOptions}}}
-							<option value="{bootswatchSkinOptions.value}" <!-- IF bootswatchSkinOptions.selected -->selected<!-- ENDIF bootswatchSkinOptions.selected -->>{bootswatchSkinOptions.name}</option>
+							<option value="{bootswatchSkinOptions.value}" {{{ if bootswatchSkinOptions.selected }}}selected{{{ end }}}>{bootswatchSkinOptions.name}</option>
 							{{{end}}}
 						</select>
 					</div>
-					<!-- ENDIF !disableCustomUserSkins -->
+					<hr/>
+					{{{ end }}}
 
-					<!-- IF allowUserHomePage -->
-					<h4>[[user:select-homepage]]</h4>
-					<div class="card card-body mb-3">
+					{{{ if allowUserHomePage }}}
+					<h6 class="fw-bold">[[user:select-homepage]]</h6>
+					<div class="">
 						<div class="mb-2">
-							<label for="homePageRoute">[[user:homepage]]</label>
-							<select class="form-select" id="homePageRoute" data-property="homePageRoute">
+							<select class="form-select form-select-sm" id="homePageRoute" data-property="homePageRoute">
 								<option value="none">None</option>
 								{{{each homePageRoutes}}}
 								<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
 								{{{end}}}
 							</select>
-							<p class="form-text">[[user:homepage_description]]</p>
+							<p class="form-text text-xs">[[user:homepage_description]]</p>
 						</div>
 						<div id="homePageCustom" class="mb-2" style="display: none;">
-							<label for="homePageCustom">[[user:custom_route]]</label>
-							<input type="text" class="form-control" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
-							<p class="form-text">[[user:custom_route_help]]</p>
+							<label class="form-label" for="homePageCustom">[[user:custom_route]]</label>
+							<input type="text" class="form-control form-control-sm" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
+							<p class="form-text text-xs">[[user:custom_route_help]]</p>
 						</div>
 					</div>
-					<!-- ENDIF allowUserHomePage -->
+					<hr/>
+					{{{ end }}}
 
-					<h4>[[global:privacy]]</h4>
-					<div class="card card-body mb-3">
-						<!-- IF !hideEmail -->
+					<h6 class="fw-bold">[[global:privacy]]</h6>
+					<div class="">
+						{{{ if !hideEmail }}}
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/>
-							<strong>
-								<label class="form-check-label">[[user:show_email]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="showemail" {{{ if settings.showemail }}}checked {{{ end }}}/>
+							<label class="form-check-label text-sm">[[user:show_email]]</label>
 						</div>
-						<!-- ENDIF !hideEmail -->
+						{{{ end }}}
 
-						<!-- IF !hideFullname -->
+						{{{ if !hideFullname }}}
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/>
-							<strong>
-								<label class="form-check-label">[[user:show_fullname]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="showfullname" {{{ if settings.showfullname }}}checked{{{ end }}}/>
+							<label class="form-check-label text-sm">[[user:show_fullname]]</label>
 						</div>
-						<!-- ENDIF !hideFullname -->
-						<!-- IF !config.disableChat -->
+						{{{ end }}}
+						{{{ if !config.disableChat }}}
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/>
-							<strong>
-								<label class="form-check-label">[[user:restrict_chats]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="restrictChat" {{{ if settings.restrictChat }}}checked{{{ end }}}/>
+							<label class="form-check-label text-sm">[[user:restrict_chats]]</label>
 						</div>
-						<!-- ENDIF !config.disableChat -->
+						{{{ end }}}
 					</div>
+					<hr/>
 
-					<h4>[[user:browsing]]</h4>
-					<div class="card card-body mb-3">
+					<h6 class="fw-bold">[[user:browsing]]</h6>
+					<div class="">
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/>
-							<strong>
-								<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" {{{ if settings.openOutgoingLinksInNewTab }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
 						</div>
-						<!-- IF inTopicSearchAvailable -->
+						{{{ if inTopicSearchAvailable }}}
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/>
-							<strong>
-								<label class="form-check-label">[[user:enable_topic_searching]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" {{{ if settings.topicSearchEnabled }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:enable_topic_searching]]</label>
 						</div>
-						<p class="form-text">[[user:topic_search_help]]</p>
-						<!-- ENDIF inTopicSearchAvailable -->
+						<p class="form-text text-xs">[[user:topic_search_help]]</p>
+						{{{ end }}}
+
 						<div class="form-check">
 							<input class="form-check-input" type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/>
-							<strong>
-								<label class="form-check-label">[[user:update_url_with_post_index]]</label>
-							</strong>
+							<label class="form-check-label">[[user:update_url_with_post_index]]</label>
 						</div>
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/>
-							<strong>
-								<label class="form-check-label">[[user:scroll_to_my_post]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" {{{ if settings.scrollToMyPost }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:scroll_to_my_post]]</label>
 						</div>
 					</div>
+					<hr/>
 
-					<h4>[[global:pagination]]</h4>
-					<div class="card card-body mb-3">
+					<h6 class="fw-bold">[[global:pagination]]</h6>
+					<div class="">
 						<div class="mb-2 form-check">
-							<input type="checkbox" class="form-check-input" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong><label class="form-check-label">[[user:paginate_description]]</label></strong>
+							<input type="checkbox" class="form-check-input" data-property="usePagination" {{{ if settings.usePagination }}}checked{{{ end }}}>
+							<label class="form-check-label">[[user:paginate_description]]</label>
 						</div>
-						<div class="mb-3">
-							<strong><label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label></strong>
-							<input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}">
+						<div class="mb-2">
+							<label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label>
+							<input type="text" class="form-control form-control-sm" data-property="topicsPerPage" value="{settings.topicsPerPage}">
 						</div>
 						<div class="">
-							<strong><label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label></strong>
-							<input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}">
+							<label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label>
+							<input type="text" class="form-control form-control-sm" data-property="postsPerPage" value="{settings.postsPerPage}">
 						</div>
 					</div>
 
-					<!-- IF !disableEmailSubscriptions -->
-					<h4>[[global:email]]</h4>
-					<div class="card card-body mb-3">
+					{{{ if !disableEmailSubscriptions }}}
+					<hr/>
+					<h6 class="fw-bold">[[global:email]]</h6>
+					<div class="">
 						<div class="mb-2">
-							<label for="dailyDigestFreq">[[user:digest_label]]</label>
-							<select class="form-select" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
+							<label class="form-label" for="dailyDigestFreq">[[user:digest_label]]</label>
+							<select class="form-select form-select-sm" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
 								{{{each dailyDigestFreqOptions}}}
-								<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
+								<option value="{./value}" {{{ if ./selected }}}selected="1"{{{ end }}}>{./name}</option>
 								{{{end}}}
 							</select>
-							<p class="form-text">[[user:digest_description]]</p>
+							<p class="form-text text-xs">[[user:digest_description]]</p>
 						</div>
 					</div>
-					<!-- ENDIF !disableEmailSubscriptions -->
+					{{{ end }}}
 
-					{{{each customSettings}}}
-					<h4>{customSettings.title}</h4>
-					<div class="card card-body mb-3">
-						{customSettings.content}
+					{{{ each customSettings}}}
+					<hr/>
+					<h6 class="fw-bold">{./title}</h6>
+					<div class="">
+						{./content}
 					</div>
-					{{{end}}}
 
+					{{{end}}}
+					<hr class="d-block d-md-none"/>
 				</div>
 
 				<div class="col-12 col-md-6">
-					<h4>[[global:language]]</h4>
-					<div class="card card-body mb-3">
-						<div class="row">
-							<div class="mb-2 col-lg-12">
-								<select data-property="userLang" class="form-select">
-									{{{each languages}}}
-									<option value="{languages.code}" <!-- IF languages.selected -->selected<!-- ENDIF languages.selected -->>{languages.name} ({languages.code})</option>
-									{{{end}}}
-								</select>
-							</div>
-						</div>
-						<!-- IF isAdmin -->
-						<!-- IF isSelf -->
-						<label>[[user:acp_language]]</label>
-						<div class="row">
-							<div class="mb-2 col-lg-12">
-								<select data-property="acpLang" class="form-select">
-									{{{each acpLanguages}}}
-									<option value="{acpLanguages.code}" <!-- IF acpLanguages.selected -->selected<!-- ENDIF acpLanguages.selected -->>{acpLanguages.name} ({acpLanguages.code})</option>
-									{{{end}}}
-								</select>
-							</div>
-						</div>
-						<!-- ENDIF isSelf -->
-						<!-- ENDIF isAdmin -->
+					<h6 class="fw-bold">[[global:language]]</h6>
+					<div class="">
+						<select data-property="userLang" class="form-select form-select-sm mb-2">
+							{{{each languages}}}
+							<option value="{./code}" {{{ if ./selected }}}selected{{{ end }}}>{./name} ({./code})</option>
+							{{{end}}}
+						</select>
 					</div>
+					<hr/>
+					{{{ if (isAdmin && isSelf) }}}
+					<h6 class="fw-bold">[[user:acp_language]]</h6>
+					<div class="">
+						<select data-property="acpLang" class="form-select form-select-sm">
+							{{{each acpLanguages}}}
+							<option value="{./code}" {{{ if ./selected }}}selected{{{ end }}}>{./name} ({./code})</option>
+							{{{end}}}
+						</select>
+					</div>
+					<hr/>
+					{{{ end }}}
 
-					<h4>[[topic:watch]]</h4>
-					<div class="card card-body mb-3">
+					<h6 class="fw-bold">[[topic:watch]]</h6>
+					<div class="">
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/>
-							<strong>
-								<label class="form-check-label">[[user:follow_topics_you_create]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" {{{ if settings.followTopicsOnCreate }}}checked{{{ end }}}/>
+							<label class="form-check-label">[[user:follow_topics_you_create]]</label>
 						</div>
 						<div class="form-check">
-							<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/>
-							<strong>
-								 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
-							</strong>
+							<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" {{{ if settings.followTopicsOnReply }}}checked{{{ end }}}/>
+							 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
 						</div>
 						<div class="mb-2">
-							<label>[[user:default-category-watch-state]]</label>
-							<select class="form-select" data-property="categoryWatchState">
-								<option value="watching" <!-- IF categoryWatchState.watching -->selected<!-- ENDIF categoryWatchState.watching -->>[[category:watching]]</option>
-								<option value="notwatching" <!-- IF categoryWatchState.notwatching -->selected<!-- ENDIF categoryWatchState.notwatching -->>[[category:not-watching]]</option>
-								<option value="ignoring" <!-- IF categoryWatchState.ignoring -->selected<!-- ENDIF categoryWatchState.ignoring -->>[[category:ignoring]]</option>
+							<label class="form-label">[[user:default-category-watch-state]]</label>
+							<select class="form-select form-select-sm" data-property="categoryWatchState">
+								<option value="watching" {{{ if categoryWatchState.watching }}}selected{{{ end }}}>[[category:watching]]</option>
+								<option value="notwatching" {{{ if categoryWatchState.notwatching }}}selected{{{ end }}}>[[category:not-watching]]</option>
+								<option value="ignoring" {{{ if categoryWatchState.ignoring }}}selected{{{ end }}}>[[category:ignoring]]</option>
 							</select>
 						</div>
 					</div>
+					<hr/>
 
-
-					<h4>[[user:notifications]]</h4>
-					<div class="card card-body mb-3">
+					<h6 class="fw-bold">[[user:notifications]]</h6>
+					<div class="">
 						{{{each notificationSettings}}}
 						<div class="row mb-3">
 							<div class="col-7">
-								<label>{notificationSettings.label}</label>
+								<label class="text-sm">{./label}</label>
 							</div>
 							<div class="mb-2 col-5">
-								<select class="form-select" data-property="{notificationSettings.name}">
-									<option value="none" <!-- IF notificationSettings.none -->selected<!-- ENDIF notificationSettings.none -->>[[notifications:none]]</option>
-									<option value="notification" <!-- IF notificationSettings.notification -->selected<!-- ENDIF notificationSettings.notification -->>[[notifications:notification_only]]</option>
-									<option value="email" <!-- IF notificationSettings.email -->selected<!-- ENDIF notificationSettings.email -->>[[notifications:email_only]]</option>
-									<option value="notificationemail" <!-- IF notificationSettings.notificationemail -->selected<!-- ENDIF notificationSettings.notificationemail -->>[[notifications:notification_and_email]]</option>
+								<select class="form-select form-select-sm" data-property="{./name}">
+									<option value="none" {{{ if ./none }}}selected{{{ end }}}>[[notifications:none]]</option>
+									<option value="notification" {{{ if ./notification }}}selected{{{ end }}}>[[notifications:notification_only]]</option>
+									<option value="email" {{{ if ./email }}}selected{{{ end }}}>[[notifications:email_only]]</option>
+									<option value="notificationemail" {{{ if ./notificationemail }}}selected{{{ end }}}>[[notifications:notification_and_email]]</option>
 								</select>
 							</div>
 						</div>
@@ -214,13 +198,13 @@
 
 						<div class="row">
 							<div class="col-7">
-								<label for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
+								<label class="text-sm" for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
 							</div>
 							<div class="mb-2 col-5">
-								<select class="form-select" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
-									{{{each upvoteNotifFreq}}}
-									<option value="{upvoteNotifFreq.name}" <!-- IF upvoteNotifFreq.selected -->selected<!-- ENDIF upvoteNotifFreq.selected -->>
-										[[user:upvote-notif-freq.{upvoteNotifFreq.name}]]
+								<select class="form-select form-select-sm" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
+									{{{ each upvoteNotifFreq }}}
+									<option value="{./name}" {{{ if ./selected }}}selected{{{ end }}}>
+										[[user:upvote-notif-freq.{./name}]]
 									</option>
 									{{{end}}}
 								</select>
@@ -229,7 +213,6 @@
 					</div>
 				</div>
 			</div>
-
 		</div>
 	</div>
 </div>

package/templates/account/theme.tpl

@@ -1,11 +1,14 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+			<div class="mb-3 d-flex justify-content-between">
+				<h3 class="fw-semibold fs-5">[[harmony:settings.title]]</h3>
 
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
-			<h3 class="fw-semibold fs-5">[[harmony:settings.title]]</h3>
+				<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
+			</div>
 
 			<form id="theme-settings" role="form">
 				<div class="form-check mb-2">
@@ -23,7 +26,7 @@
 					<label class="form-check-label">[[harmony:settings.stickyToolbar]]</label>
 				</div>
 
-				<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
+
 			</form>
 		</div>
 	</div>

package/templates/account/topics.tpl

@@ -1,32 +1,33 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row gx-5">
+	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex justify-content-between align-items-center mb-3">
-				<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
 				<div class="d-flex gap-1">
-					<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+					<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
+					{{{ if showSort }}}
+					<div class="btn-group bottom-sheet" component="thread/sort">
+						<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+						<ul class="dropdown-menu">
+							{{{each sortOptions }}}
+							<li><a class="dropdown-item" href="{config.relative_path}{./url}"><i class="fa fa-fw {{{if ./selected}}}fa-check{{{end}}}"></i>{./name}</a></li>
+							{{{end}}}
+						</ul>
+					</div>
+					{{{ end }}}
+				</div>
+
+				<div class="d-flex gap-1">
 					{{{ if canEdit }}}
+					<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
 					<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
 					<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
 					{{{ end }}}
 				</div>
 			</div>
 
-			{{{ if showSort }}}
-			<div class="btn-toolbar justify-content-end mb-2">
-				<div class="btn-group bottom-sheet" component="thread/sort">
-					<button class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span></button>
-					<ul class="dropdown-menu dropdown-menu-end">
-						{{{each sortOptions }}}
-						<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
-						{{{end}}}
-					</ul>
-				</div>
-			</div>
-			{{{ end }}}
 
 			{{{ if !topics.length }}}
 			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>