From f042cb97e8382959e2de1ce121ba5a0d2f4a6d35 Mon Sep 17 00:00:00 2001
From: Florens Verschelde <243601+fvsch@users.noreply.github.com>
Date: Mon, 29 Dec 2025 14:14:22 +0100
Subject: [PATCH] fix(ui): improve timeline title spacing, truncation (#3331)

Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
---
 app/components/main/MainContent.vue           | 14 ++++----
 app/components/main/MainTitle.vue             | 33 +++++++++++++++++++
 app/error.vue                                 |  2 +-
 app/pages/[[server]]/@[account]/index.vue     | 13 ++++----
 app/pages/[[server]]/explore.vue              |  7 ++--
 app/pages/[[server]]/lists.vue                |  7 ++--
 app/pages/[[server]]/public/index.vue         |  7 ++--
 app/pages/[[server]]/public/local.vue         |  7 ++--
 app/pages/[[server]]/search.vue               |  7 ++--
 app/pages/blocks.vue                          |  2 +-
 app/pages/bookmarks.vue                       |  7 ++--
 app/pages/compose.vue                         |  7 ++--
 app/pages/conversations.vue                   |  7 ++--
 app/pages/domain_blocks.vue                   |  2 +-
 app/pages/favourites.vue                      | 10 +++---
 app/pages/hashtags.vue                        |  7 ++--
 app/pages/home.vue                            |  7 ++--
 app/pages/mutes.vue                           |  2 +-
 app/pages/notifications.vue                   |  7 ++--
 app/pages/pinned.vue                          |  7 ++--
 app/pages/settings.vue                        |  7 ++--
 app/pages/settings/about/index.vue            |  6 ++--
 app/pages/settings/interface/index.vue        |  6 ++--
 app/pages/settings/language/index.vue         |  6 ++--
 app/pages/settings/notifications/index.vue    |  6 ++--
 .../settings/notifications/notifications.vue  |  7 ++--
 .../notifications/push-notifications.vue      |  6 ++--
 app/pages/settings/preferences/index.vue      |  4 +--
 app/pages/settings/profile/appearance.vue     |  6 ++--
 app/pages/settings/profile/featured-tags.vue  |  7 ++--
 app/pages/settings/profile/index.vue          |  6 ++--
 app/pages/settings/users/index.vue            |  6 ++--
 unocss.config.ts                              |  2 --
 33 files changed, 129 insertions(+), 108 deletions(-)
 create mode 100644 app/components/main/MainTitle.vue

diff --git a/app/components/main/MainContent.vue b/app/components/main/MainContent.vue
index a7cc256f..f028c449 100644
--- a/app/components/main/MainContent.vue
+++ b/app/components/main/MainContent.vue
@@ -5,6 +5,8 @@ const { back = false } = defineProps<{
    * Note: this will be forced to false on xl screens to avoid duplicating the sidebar's back button.
    */
   back?: boolean | 'small-only'
+  /** Show the back button on small screens */
+  backOnSmallScreen?: boolean
   /** Do not applying overflow hidden to let use floatable components in title */
   noOverflowHidden?: boolean
 }>()
@@ -46,22 +48,22 @@ const showBackButton = computed(() => {
         'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
       }"
     >
-      <div flex justify-between gap-2 min-h-53px px5 py1 :class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base">
-        <div flex gap-2 items-center :overflow-hidden="!noOverflowHidden ? '' : false" w-full>
+      <div flex="~ justify-between" min-h-53px px-2 py-1 :class="{ 'xl:hidden': $route.name !== 'tag' }" border="b base">
+        <div flex="~ items-center" w-full>
           <button
-            v-if="showBackButton"
-            btn-text flex items-center ms="-3" p-3
+            v-if="backOnSmallScreen || showBackButton"
+            btn-text flex items-center p-3 xl:hidden
             :aria-label="$t('nav.back')"
             @click="$router.go(-1)"
           >
             <div text-lg i-ri:arrow-left-line class="rtl-flip" />
           </button>
-          <div :truncate="!noOverflowHidden ? '' : false" flex w-full class="native-mac:justify-start native-mac:text-center">
+          <div flex w-full>
             <slot name="title" />
           </div>
           <div sm:hidden h-7 w-1px />
         </div>
-        <div flex items-center flex-shrink-0 gap-x-2>
+        <div flex="~ items-center shrink-0 gap-x-2" px-3>
           <slot name="actions" />
           <PwaBadge xl:hidden />
           <NavUser v-if="isHydrated" />
diff --git a/app/components/main/MainTitle.vue b/app/components/main/MainTitle.vue
new file mode 100644
index 00000000..14273284
--- /dev/null
+++ b/app/components/main/MainTitle.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+const { as = 'div' } = defineProps<{
+  as?: string
+  icon?: string
+  secondary?: boolean
+}>()
+
+function doScroll({ currentTarget, metaKey, ctrlKey }: MouseEvent | KeyboardEvent) {
+  // Ctrl+click or Command+click to open the link in a new tab
+  // should not scroll the current tab's timeline
+  if ((metaKey || ctrlKey) && (currentTarget as HTMLElement)?.nodeName === 'A') {
+    return
+  }
+  useNuxtApp().$scrollToTop()
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    class="
+      flex items-center gap-2 min-h-10 px-3
+      text-start text-lg lh-tight font-bold cursor-pointer
+    "
+    :class="{ 'text-primary': !secondary }"
+    @click="doScroll($event)"
+  >
+    <span v-if="icon" :class="icon" />
+    <span min-w-8 line-clamp-2>
+      <slot />
+    </span>
+  </component>
+</template>
diff --git a/app/error.vue b/app/error.vue
index f4c4b575..00f2a894 100644
--- a/app/error.vue
+++ b/app/error.vue
@@ -36,7 +36,7 @@ async function reload() {
   <NuxtLayout>
     <MainContent>
       <template #title>
-        <span timeline-title-style>Error</span>
+        <MainTitle>Error</MainTitle>
       </template>
       <slot>
         <form p5 grid gap-y-4 @submit="reload">
diff --git a/app/pages/[[server]]/@[account]/index.vue b/app/pages/[[server]]/@[account]/index.vue
index 88a4aff2..7fb8f358 100644
--- a/app/pages/[[server]]/@[account]/index.vue
+++ b/app/pages/[[server]]/@[account]/index.vue
@@ -23,12 +23,13 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template #title>
-      <ContentRich
-        timeline-title-style
-        :content="account ? getDisplayName(account) : t('nav.profile')"
-        :show-emojis="!getPreferences(userSettings, 'hideUsernameEmojis')"
-        :markdown="false"
-      />
+      <MainTitle>
+        <ContentRich
+          :content="account ? getDisplayName(account) : t('nav.profile')"
+          :show-emojis="!getPreferences(userSettings, 'hideUsernameEmojis')"
+          :markdown="false"
+        />
+      </MainTitle>
     </template>
 
     <template v-if="pending" />
diff --git a/app/pages/[[server]]/explore.vue b/app/pages/[[server]]/explore.vue
index feed5f5f..93c0d826 100644
--- a/app/pages/[[server]]/explore.vue
+++ b/app/pages/[[server]]/explore.vue
@@ -42,10 +42,9 @@ const tabs = computed<CommonRouteTabOption[]>(() => [
 <template>
   <MainContent>
     <template #title>
-      <span timeline-title-style flex items-center gap-2 cursor-pointer @click="$scrollToTop">
-        <div i-ri:compass-3-line />
-        <span>{{ t('nav.explore') }}</span>
-      </span>
+      <MainTitle icon="i-ri:compass-3-line">
+        {{ t('nav.explore') }}
+      </MainTitle>
     </template>
 
     <template #header>
diff --git a/app/pages/[[server]]/lists.vue b/app/pages/[[server]]/lists.vue
index 7174faa8..e9993048 100644
--- a/app/pages/[[server]]/lists.vue
+++ b/app/pages/[[server]]/lists.vue
@@ -9,10 +9,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/lists" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:list-check />
-        <span text-lg font-bold>{{ t('nav.lists') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/lists" icon="i-ri:list-check">
+        {{ t('nav.lists') }}
+      </MainTitle>
     </template>
     <NuxtPage v-if="isHydrated" />
   </MainContent>
diff --git a/app/pages/[[server]]/public/index.vue b/app/pages/[[server]]/public/index.vue
index a4b93c02..fca689fc 100644
--- a/app/pages/[[server]]/public/index.vue
+++ b/app/pages/[[server]]/public/index.vue
@@ -9,10 +9,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:earth-line />
-        <span>{{ $t('title.federated_timeline') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/public" icon="i-ri:earth-line">
+        {{ $t('title.federated_timeline') }}
+      </MainTitle>
     </template>
 
     <TimelinePublic v-if="isHydrated" />
diff --git a/app/pages/[[server]]/public/local.vue b/app/pages/[[server]]/public/local.vue
index 3aca1e64..e7d60c1c 100644
--- a/app/pages/[[server]]/public/local.vue
+++ b/app/pages/[[server]]/public/local.vue
@@ -9,10 +9,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/public/local" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:group-2-line />
-        <span>{{ t('title.local_timeline') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/public/local" icon="i-ri:group-2-line">
+        {{ $t('title.local_timeline') }}
+      </MainTitle>
     </template>
 
     <TimelinePublicLocal v-if="isHydrated" />
diff --git a/app/pages/[[server]]/search.vue b/app/pages/[[server]]/search.vue
index 30602b36..989f8deb 100644
--- a/app/pages/[[server]]/search.vue
+++ b/app/pages/[[server]]/search.vue
@@ -25,10 +25,9 @@ watch(keys['/'], (v) => {
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/search" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:search-line class="rtl-flip" />
-        <span>{{ $t('nav.search') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/search" icon="i-ri:search-line rtl-flip">
+        {{ $t('nav.search') }}
+      </MainTitle>
     </template>
 
     <div px2 mt3>
diff --git a/app/pages/blocks.vue b/app/pages/blocks.vue
index df78355d..6f2da0b2 100644
--- a/app/pages/blocks.vue
+++ b/app/pages/blocks.vue
@@ -13,7 +13,7 @@ useHydratedHead({
 <template>
   <MainContent back>
     <template #title>
-      <span timeline-title-style>{{ $t('nav.blocked_users') }}</span>
+      <MainTitle>{{ $t('nav.blocked_users') }}</MainTitle>
     </template>
 
     <TimelineBlocks v-if="isHydrated" />
diff --git a/app/pages/bookmarks.vue b/app/pages/bookmarks.vue
index efebad8c..ad90ff10 100644
--- a/app/pages/bookmarks.vue
+++ b/app/pages/bookmarks.vue
@@ -13,10 +13,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/bookmarks" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:bookmark-line />
-        <span>{{ t('nav.bookmarks') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/bookmarks" icon="i-ri:bookmark-line">
+        {{ t('nav.bookmarks') }}
+      </MainTitle>
     </template>
 
     <TimelineBookmarks v-if="isHydrated" />
diff --git a/app/pages/compose.vue b/app/pages/compose.vue
index 1fb64fb4..26631a6c 100644
--- a/app/pages/compose.vue
+++ b/app/pages/compose.vue
@@ -13,10 +13,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/compose" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:quill-pen-line />
-        <span>{{ $t('nav.compose') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/compose" icon="i-ri:quill-pen-line">
+        {{ $t('nav.compose') }}
+      </MainTitle>
     </template>
     <PublishWidgetFull />
   </MainContent>
diff --git a/app/pages/conversations.vue b/app/pages/conversations.vue
index f0ab6d40..de8e8c63 100644
--- a/app/pages/conversations.vue
+++ b/app/pages/conversations.vue
@@ -13,10 +13,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/conversations" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:at-line />
-        <span>{{ t('nav.conversations') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/conversations" icon="i-ri:at-line">
+        {{ t('nav.conversations') }}
+      </MainTitle>
     </template>
 
     <TimelineConversations v-if="isHydrated" />
diff --git a/app/pages/domain_blocks.vue b/app/pages/domain_blocks.vue
index 5f981c3e..b413ee73 100644
--- a/app/pages/domain_blocks.vue
+++ b/app/pages/domain_blocks.vue
@@ -13,7 +13,7 @@ useHydratedHead({
 <template>
   <MainContent back>
     <template #title>
-      <span timeline-title-style>{{ $t('nav.blocked_domains') }}</span>
+      <MainTitle>{{ $t('nav.blocked_domains') }}</MainTitle>
     </template>
 
     <TimelineDomainBlocks v-if="isHydrated" />
diff --git a/app/pages/favourites.vue b/app/pages/favourites.vue
index 9882be35..b1c32101 100644
--- a/app/pages/favourites.vue
+++ b/app/pages/favourites.vue
@@ -14,10 +14,12 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/favourites" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div :class="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'" />
-        <span>{{ t('nav.favourites') }}</span>
-      </NuxtLink>
+      <MainTitle
+        as="router-link" to="/favourites"
+        :icon="useStarFavoriteIcon ? 'i-ri:star-line' : 'i-ri:heart-3-line'"
+      >
+        {{ t('nav.favourites') }}
+      </MainTitle>
     </template>
 
     <TimelineFavourites v-if="isHydrated" />
diff --git a/app/pages/hashtags.vue b/app/pages/hashtags.vue
index bdf9b49b..22b84f4f 100644
--- a/app/pages/hashtags.vue
+++ b/app/pages/hashtags.vue
@@ -9,10 +9,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/hashtags" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div class="i-ri:hashtag" />
-        <span>{{ t('nav.hashtags') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/hashtags" icon="i-ri:hashtag">
+        {{ t('nav.hashtags') }}
+      </MainTitle>
     </template>
 
     <NuxtPage v-if="isHydrated && currentUser" />
diff --git a/app/pages/home.vue b/app/pages/home.vue
index 27383c2d..e753a32a 100644
--- a/app/pages/home.vue
+++ b/app/pages/home.vue
@@ -18,10 +18,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/home" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:home-5-line />
-        <span>{{ $t('nav.home') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/home" icon="i-ri:home-5-line">
+        {{ $t('nav.home') }}
+      </MainTitle>
     </template>
 
     <TimelineHome v-if="isHydrated" />
diff --git a/app/pages/mutes.vue b/app/pages/mutes.vue
index a9b5d242..d8b74919 100644
--- a/app/pages/mutes.vue
+++ b/app/pages/mutes.vue
@@ -13,7 +13,7 @@ useHydratedHead({
 <template>
   <MainContent back>
     <template #title>
-      <span timeline-title-style>{{ $t('nav.muted_users') }}</span>
+      <MainTitle>{{ $t('nav.muted_users') }}</MainTitle>
     </template>
 
     <TimelineMutes v-if="isHydrated" />
diff --git a/app/pages/notifications.vue b/app/pages/notifications.vue
index 7c504d2c..b93d1b0a 100644
--- a/app/pages/notifications.vue
+++ b/app/pages/notifications.vue
@@ -74,10 +74,9 @@ const moreOptions = computed<CommonRouteTabMoreOption>(() => ({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/notifications" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:notification-4-line />
-        <span>{{ t('nav.notifications') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/notifications" icon="i-ri:notification-4-line">
+        {{ t('nav.notifications') }}
+      </MainTitle>
     </template>
 
     <template #actions>
diff --git a/app/pages/pinned.vue b/app/pages/pinned.vue
index a585ca6b..789bca0c 100644
--- a/app/pages/pinned.vue
+++ b/app/pages/pinned.vue
@@ -13,10 +13,9 @@ useHydratedHead({
 <template>
   <MainContent>
     <template #title>
-      <NuxtLink to="/pinned" timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:pushpin-line />
-        <span>{{ t('account.pinned') }}</span>
-      </NuxtLink>
+      <MainTitle as="router-link" to="/pinned" icon="i-ri:pushpin-line">
+        {{ t('account.pinned') }}
+      </MainTitle>
     </template>
 
     <TimelinePinned v-if="isHydrated && currentUser" />
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index ca1fef47..fcbe9480 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -20,10 +20,9 @@ const isRootPath = computed(() => route.name === 'settings')
       <div border="e base" :class="isRootPath ? 'block lg:flex-none flex-1' : 'hidden lg:block'">
         <MainContent>
           <template #title>
-            <div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
-              <div i-ri:settings-3-line />
-              <span>{{ $t('nav.settings') }}</span>
-            </div>
+            <MainTitle icon="i-ri:settings-3-line">
+              {{ $t('nav.settings') }}
+            </MainTitle>
           </template>
           <div xl:w-97 lg:w-78 w-full>
             <SettingsItem
diff --git a/app/pages/settings/about/index.vue b/app/pages/settings/about/index.vue
index 70df6b22..284dfc59 100644
--- a/app/pages/settings/about/index.vue
+++ b/app/pages/settings/about/index.vue
@@ -19,9 +19,9 @@ function handleShowCommit() {
 <template>
   <MainContent back="small-only">
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.about.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.about.label') }}
+      </MainTitle>
     </template>
 
     <div flex="~ col gap4" w-full items-center justify-center my5>
diff --git a/app/pages/settings/interface/index.vue b/app/pages/settings/interface/index.vue
index 6020466d..5bdcce97 100644
--- a/app/pages/settings/interface/index.vue
+++ b/app/pages/settings/interface/index.vue
@@ -9,9 +9,9 @@ useHydratedHead({
 <template>
   <MainContent back="small-only">
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.interface.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.interface.label') }}
+      </MainTitle>
     </template>
     <div px-6 pt-3 pb-6 flex="~ col gap6">
       <SettingsFontSize />
diff --git a/app/pages/settings/language/index.vue b/app/pages/settings/language/index.vue
index 42755b83..3d0b88db 100644
--- a/app/pages/settings/language/index.vue
+++ b/app/pages/settings/language/index.vue
@@ -17,9 +17,9 @@ const status = computed(() => {
 <template>
   <MainContent back="small-only">
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.language.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.language.label') }}
+      </MainTitle>
     </template>
     <div p6>
       <section space-y-2>
diff --git a/app/pages/settings/notifications/index.vue b/app/pages/settings/notifications/index.vue
index f16cf7a3..4bc2defa 100644
--- a/app/pages/settings/notifications/index.vue
+++ b/app/pages/settings/notifications/index.vue
@@ -14,9 +14,9 @@ useHydratedHead({
 <template>
   <MainContent back="small-only">
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.notifications.label') }}
+      </MainTitle>
     </template>
 
     <SettingsItem
diff --git a/app/pages/settings/notifications/notifications.vue b/app/pages/settings/notifications/notifications.vue
index 0cb65cda..834aa24e 100644
--- a/app/pages/settings/notifications/notifications.vue
+++ b/app/pages/settings/notifications/notifications.vue
@@ -13,10 +13,9 @@ useHydratedHead({
 <template>
   <MainContent back>
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:test-tube-line />
-        <span>{{ $t('settings.notifications.notifications.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary icon="i-ri:test-tube-line">
+        {{ $t('settings.notifications.notifications.label') }}
+      </MainTitle>
     </template>
     <div text-center mt-10>
       <h1 text-4xl>
diff --git a/app/pages/settings/notifications/push-notifications.vue b/app/pages/settings/notifications/push-notifications.vue
index af5d93ed..ec6beb2a 100644
--- a/app/pages/settings/notifications/push-notifications.vue
+++ b/app/pages/settings/notifications/push-notifications.vue
@@ -16,9 +16,9 @@ useHydratedHead({
 <template>
   <MainContent back>
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.push_notifications.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.notifications.push_notifications.label') }}
+      </MainTitle>
     </template>
     <NotificationPreferences show />
   </MainContent>
diff --git a/app/pages/settings/preferences/index.vue b/app/pages/settings/preferences/index.vue
index bb812b6e..3061d973 100644
--- a/app/pages/settings/preferences/index.vue
+++ b/app/pages/settings/preferences/index.vue
@@ -11,9 +11,9 @@ const userSettings = useUserSettings()
 <template>
   <MainContent back="small-only">
     <template #title>
-      <h1 text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
+      <MainTitle as="h1" secondary>
         {{ $t('settings.preferences.label') }}
-      </h1>
+      </MainTitle>
     </template>
     <section>
       <h2 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center sr-only>
diff --git a/app/pages/settings/profile/appearance.vue b/app/pages/settings/profile/appearance.vue
index af0a1f6c..45d9fd74 100644
--- a/app/pages/settings/profile/appearance.vue
+++ b/app/pages/settings/profile/appearance.vue
@@ -105,9 +105,9 @@ onReactivated(refreshInfo)
 <template>
   <MainContent back>
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.profile.appearance.title') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.profile.appearance.title') }}
+      </MainTitle>
     </template>
 
     <form space-y-5 @submit.prevent="submit">
diff --git a/app/pages/settings/profile/featured-tags.vue b/app/pages/settings/profile/featured-tags.vue
index 491bf8b7..c8cb3e47 100644
--- a/app/pages/settings/profile/featured-tags.vue
+++ b/app/pages/settings/profile/featured-tags.vue
@@ -13,10 +13,9 @@ useHydratedHead({
 <template>
   <MainContent back>
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <div i-ri:test-tube-line />
-        <span>{{ $t('settings.profile.featured_tags.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary icon="i-ri:test-tube-line">
+        {{ $t('settings.profile.featured_tags.label') }}
+      </MainTitle>
     </template>
     <div text-center mt-10>
       <h1 text-4xl>
diff --git a/app/pages/settings/profile/index.vue b/app/pages/settings/profile/index.vue
index c37048e2..6e167d1d 100644
--- a/app/pages/settings/profile/index.vue
+++ b/app/pages/settings/profile/index.vue
@@ -13,9 +13,9 @@ useHydratedHead({
 <template>
   <MainContent back="small-only">
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.profile.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.profile.label') }}
+      </MainTitle>
     </template>
 
     <SettingsItem
diff --git a/app/pages/settings/users/index.vue b/app/pages/settings/users/index.vue
index 3a0626d7..13fad101 100644
--- a/app/pages/settings/users/index.vue
+++ b/app/pages/settings/users/index.vue
@@ -68,9 +68,9 @@ async function importTokens() {
 <template>
   <MainContent back="small-only">
     <template #title>
-      <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.users.label') }}</span>
-      </div>
+      <MainTitle as="h1" secondary>
+        {{ $t('settings.users.label') }}
+      </MainTitle>
     </template>
     <div p6>
       <template v-if="loggedInUsers.length">
diff --git a/unocss.config.ts b/unocss.config.ts
index 4bf2a6e7..7f8b1cfd 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -63,8 +63,6 @@ export default defineConfig({
       'flex-v-center': 'items-center',
       'flex-h-center': 'justify-center',
       'bg-hover-overflow': 'relative z-0 transition-colors duration-250 after-content-empty after:(absolute inset--4px bg-transparent rounded-full z--1 transition-colors duration-250) hover:after:(bg-active)',
-
-      'timeline-title-style': 'text-primary text-lg font-bold',
     },
     [/^elk-group-hover[:-]([a-z0-9/-]+)$/, ([,r]) => `media-mouse-group-hover-${r} group-active-${r}`],
   ],