changelog.d/misc-markup.fix

@@ -0,0 +1 @@
+Fix small markup inconsistencies

changelog.d/multiple-status-mute-reasons.fix

@@ -0,0 +1 @@
+Fix whitespaces for multiple status mute reasons, display bot status reason

changelog.d/user-link.add

@@ -0,0 +1 @@
+Make UserLink wrappable

src/components/announcements_page/announcements_page.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="panel panel-default announcements-page">
     <div class="panel-heading">
-      <span>
+      <h1 class="title">
         {{ $t('announcements.page_header') }}
-      </span>
+      </h1>
     </div>
     <div class="panel-body">
       <section

src/components/bookmark_folder_edit/bookmark_folder_edit.vue

@@ -13,7 +13,7 @@
           icon="chevron-left"
         />
       </button>
-      <div class="title">
+      <h1 class="title">
         <i18n-t
           v-if="id"
           keypath="bookmark_folders.editing_folder"
@@ -26,7 +26,7 @@
           v-else
           keypath="bookmark_folders.creating_folder"
         />
-      </div>
+      </h1>
     </div>
     <div class="panel-body">
       <div class="input-wrap">

src/components/bookmark_folders/bookmark_folders.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="Bookmark-folders panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.bookmark_folders') }}
-      </div>
+      </h1>
       <router-link
         :to="{ name: 'bookmark-folder-new' }"
         class="button-default btn new-folder-button"

src/components/chat_list/chat_list.vue

@@ -7,9 +7,9 @@
     class="chat-list panel panel-default"
   >
     <div class="panel-heading -sticky">
-      <span class="title">
+      <h1 class="title">
         {{ $t("chats.chats") }}
-      </span>
+      </h1>
       <button
         class="button-default"
         @click="newChat"

src/components/conversation/conversation.vue

@@ -9,7 +9,9 @@
       v-if="isExpanded"
       class="panel-heading conversation-heading -sticky"
     >
-      <span class="title"> {{ $t('timeline.conversation') }} </span>
+      <h1 class="title">
+        {{ $t('timeline.conversation') }}
+      </h1>
       <button
         v-if="collapsable"
         class="button-unstyled -link"

src/components/dialog_modal/dialog_modal.vue

@@ -8,9 +8,9 @@
       @click.stop=""
     >
       <div class="panel-heading dialog-modal-heading">
-        <div class="title">
+        <h1 class="title">
           <slot name="header" />
-        </div>
+        </h1>
       </div>
       <div class="panel-body dialog-modal-content">
         <slot name="default" />

src/components/edit_status_modal/edit_status_modal.vue

@@ -6,7 +6,9 @@
   >
     <div class="edit-form-modal-panel panel">
       <div class="panel-heading">
-        {{ $t('post_status.edit_status') }}
+        <h1 class="title">
+          {{ $t('post_status.edit_status') }}
+        </h1>
       </div>
       <PostStatusForm
         class="panel-body"

src/components/features_panel/features_panel.vue

@@ -2,9 +2,9 @@
   <div class="features-panel">
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
-        <div class="title">
+        <h1 class="title">
           {{ $t('features_panel.title') }}
-        </div>
+        </h1>
       </div>
       <div class="panel-body features-panel">
         <ul>

src/components/follow_requests/follow_requests.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.friend_requests') }}
-      </div>
+      </h1>
     </div>
     <div class="panel-body">
       <FollowRequestCard

src/components/interactions/interactions.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t("nav.interactions") }}
-      </div>
+      </h1>
     </div>
     <tab-switcher
       ref="tabSwitcher"

src/components/lists/lists.vue

@@ -2,7 +2,9 @@
   <div class="Lists panel panel-default">
     <div class="panel-heading">
       <div class="title">
-        {{ $t('lists.lists') }}
+        <h1 class="title">
+          {{ $t('lists.lists') }}
+        </h1>
       </div>
       <router-link
         :to="{ name: 'lists-new' }"

src/components/login_form/login_form.vue

@@ -3,7 +3,7 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      {{ $t('login.login') }}
+      <h1 class="title">{{ $t('login.login') }}</h1>
     </div>
 
     <div class="panel-body">

src/components/mfa_form/recovery_form.vue

@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      {{ $t('login.heading.recovery') }}
+      <h1 class="title">
+        {{ $t('login.heading.recovery') }}
+      </h1>
     </div>
 
     <div class="panel-body">

src/components/mfa_form/totp_form.vue

@@ -3,7 +3,9 @@
     <!-- Default panel contents -->
 
     <div class="panel-heading">
-      {{ $t('login.heading.totp') }}
+      <h1 class="title">
+        {{ $t('login.heading.totp') }}
+      </h1>
     </div>
 
     <div class="panel-body">

src/components/mobile_nav/mobile_nav.vue

@@ -50,13 +50,13 @@
       @touchmove.stop="notificationsTouchMove"
     >
       <div class="panel-heading mobile-notifications-header">
-        <span class="title">
+        <h1 class="title">
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
             class="badge -notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
-        </span>
+        </h1>
         <span class="spacer" />
         <button
           v-if="notificationsAtTop"

src/components/notification/notification.scss

@@ -26,6 +26,7 @@
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
+    gap: 1ex;
 
     & .status-username,
     & .mute-thread,

src/components/notifications/notifications.vue

@@ -14,13 +14,13 @@
           v-if="!noHeading"
           class="notifications-heading panel-heading -sticky"
         >
-          <div class="title">
+          <h1 class="title">
             {{ $t('notifications.notifications') }}
             <span
               v-if="unseenCountBadgeText"
               class="badge -notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
-          </div>
+          </h1>
           <div
             v-if="showScrollTop"
             class="rightside-button"

src/components/password_reset/password_reset.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{ $t('password_reset.password_reset') }}
+      <h1 class="title">
+        {{ $t('password_reset.password_reset') }}
+      </h1>
     </div>
     <div class="panel-body">
       <form

src/components/post_status_modal/post_status_modal.vue

@@ -7,7 +7,9 @@
   >
     <div class="post-form-modal-panel panel">
       <div class="panel-heading">
-        {{ $t('post_status.new_status') }}
+        <h1 class="title">
+          {{ $t('post_status.new_status') }}
+        </h1>
       </div>
       <PostStatusForm
         class="panel-body"

src/components/registration/registration.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="settings panel panel-default">
     <div class="panel-heading">
-      {{ $t('registration.registration') }}
+      <h1 class="title">
+        {{ $t('registration.registration') }}
+      </h1>
     </div>
     <div
       v-if="!hasSignUpNotice"

src/components/remote_user_resolver/remote_user_resolver.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{ $t('remote_user_resolver.remote_user_resolver') }}
+      <h1 class="title">
+        {{ $t('remote_user_resolver.remote_user_resolver') }}
+      </h1>
     </div>
     <div class="panel-body">
       <p>

src/components/search/search.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="Search panel panel-default">
     <div class="panel-heading">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.search') }}
-      </div>
+      </h1>
     </div>
     <div class="panel-body search-input-container">
       <input

src/components/settings_modal/settings_modal.vue

@@ -7,9 +7,9 @@
   >
     <div class="settings-modal-panel panel">
       <div class="panel-heading">
-        <span class="title">
+        <h1 class="title">
           {{ modalMode === 'user' ? $t('settings.settings') : $t('admin_dash.window_title') }}
-        </span>
+        </h1>
         <transition name="fade">
           <div
             v-if="currentSaveStateNotice"

src/components/settings_modal/tabs/theme_tab/theme_preview.vue

@@ -3,12 +3,12 @@
     <div class="underlay underlay-preview" />
     <div class="panel dummy">
       <div class="panel-heading">
-        <div class="title">
+        <h1 class="title">
           {{ $t('settings.style.preview.header') }}
           <span class="badge -notification">
             99
           </span>
-        </div>
+        </h1>
         <span class="faint">
           {{ $t('settings.style.preview.header_faint') }}
         </span>

src/components/shout_panel/shout_panel.vue

@@ -9,14 +9,14 @@
         :class="{ 'shout-heading': floating }"
         @click.stop.prevent="togglePanel"
       >
-        <div class="title">
+        <h1 class="title">
           {{ $t('shoutbox.title') }}
           <FAIcon
             v-if="floating"
             icon="times"
             class="close-icon"
           />
-        </div>
+        </h1>
       </div>
       <div class="panel-body shout-window">
         <div

src/components/status/status.scss

@@ -281,6 +281,7 @@
     overflow: hidden;
     display: flex;
     flex-wrap: nowrap;
+    gap: 1ex;
 
     & .status-username,
     & .mute-thread,

src/components/status/status.vue

@@ -37,16 +37,23 @@
           {{ $t('status.sensitive_muted') }}
         </small>
         <small
-          v-if="showReasonMutedThread"
+          v-if="muteBotStatuses && botStatus"
           class="mute-thread"
         >
-          {{ $t('status.thread_muted') }}
+          {{ $t('status.bot_muted') }}
         </small>
         <small
-          v-if="showReasonMutedThread && muteWordHits.length > 0"
+          v-if="showReasonMutedThread"
           class="mute-thread"
         >
-          {{ $t('status.thread_muted_and_words') }}
+          <span>
+            {{ $t('status.thread_muted') }}
+          </span>
+          <span
+            v-if="muteWordHits.length > 0"
+          >
+            {{ $t('status.thread_muted_and_words') }}
+          </span>
         </small>
         <small
           class="mute-words"

src/components/status_history_modal/status_history_modal.vue

@@ -6,7 +6,9 @@
   >
     <div class="status-history-modal-panel panel">
       <div class="panel-heading">
-        {{ $t('status.status_history') }} ({{ historyCount }})
+        <h1 class="title">
+          {{ $t('status.status_history') }} ({{ historyCount }})
+        </h1>
       </div>
       <div class="panel-body">
         <div

src/components/timeline_menu/timeline_menu.vue

@@ -29,8 +29,8 @@
       </ul>
     </template>
     <template #trigger>
-      <span class="button-unstyled title timeline-menu-title">
-        <span class="timeline-title">{{ timelineName() }}</span>
+      <span class="button-unstyled timeline-menu-title">
+        <h1 class="title timeline-title">{{ timelineName() }}</h1>
         <span>
           <FAIcon
             size="sm"

src/components/update_notification/update_notification.vue

@@ -9,9 +9,9 @@
       :class="{ '-peek': !showingMore }"
     >
       <div class="panel-heading">
-        <span class="title">
+        <h1 class="title">
           {{ $t('update.big_update_title') }}
-        </span>
+        </h1>
       </div>
       <div class="panel-body">
         <div

src/components/user_link/user_link.vue

@@ -1,12 +1,16 @@
 <template>
-  <router-link
-    :title="user.screen_name_ui"
-    :to="userProfileLink(user)"
-  >
-    {{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
-      :user="user"
-    />
-  </router-link>
+  <div class="user-profile-link">
+    <router-link
+      :title="user.screen_name_ui"
+      :to="userProfileLink(user)"
+    >
+      <slot>
+        {{ at ? '@' : '' }}{{ user.screen_name_ui }}<UnicodeDomainIndicator
+          :user="user"
+        />
+      </slot>
+    </router-link>
+  </div>
 </template>
 
 <script>

src/components/user_profile/user_profile.vue

@@ -142,9 +142,9 @@
       class="panel user-profile-placeholder"
     >
       <div class="panel-heading">
-        <div class="title">
+        <h1 class="title">
           {{ $t('settings.profile_tab') }}
-        </div>
+        </h1>
       </div>
       <div>
         <span v-if="error">{{ error }}</span>

src/components/user_reporting_modal/user_reporting_modal.vue

@@ -6,7 +6,7 @@
     <div class="user-reporting-panel panel">
       <div class="panel-heading">
         <i18n-t
-          tag="div"
+          tag="h1"
           keypath="user_reporting.title"
           class="title"
         >

src/components/who_to_follow/who_to_follow.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="panel panel-default">
     <div class="panel-heading">
-      {{ $t('who_to_follow.who_to_follow') }}
+      <h1 class="title">
+        {{ $t('who_to_follow.who_to_follow') }}
+      </h1>
     </div>
     <div class="panel-body">
       <FollowCard

src/components/who_to_follow_panel/who_to_follow_panel.vue

@@ -2,9 +2,9 @@
   <div class="who-to-follow-panel">
     <div class="panel panel-default base01-background">
       <div class="panel-heading timeline-heading base02-background base04">
-        <div class="title">
+        <h1 class="title">
           {{ $t('who_to_follow.who_to_follow') }}
-        </div>
+        </h1>
       </div>
       <div class="who-to-follow">
         <p

src/i18n/en.json

@@ -1151,6 +1151,7 @@
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
     "sensitive_muted": "Muting sensitive content",
+    "bot_muted": "Muting bot content",
     "show_full_subject": "Show full subject",
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",

src/panel.scss

@@ -115,6 +115,8 @@
 
   .title {
     font-size: 1.3em;
+    margin: 0;
+    font-weight: normal;
   }
 
   .alert {