From 2bd16bedcea4cef113c008bd6368f1094c808b3a Mon Sep 17 00:00:00 2001
From: Pleroma User <66706-pleromian@users.noreply.git.pleroma.social>
Date: Tue, 22 Oct 2024 08:24:06 +0000
Subject: [PATCH] Markup inconsistencies

---
 changelog.d/misc-markup.fix                   |  1 +
 changelog.d/user-link.add                     |  1 +
 .../announcements_page/announcements_page.vue |  4 ++--
 .../bookmark_folder_edit.vue                  |  4 ++--
 .../bookmark_folders/bookmark_folders.vue     |  4 ++--
 src/components/chat_list/chat_list.vue        |  4 ++--
 src/components/conversation/conversation.vue  |  4 +++-
 src/components/dialog_modal/dialog_modal.vue  |  4 ++--
 .../edit_status_modal/edit_status_modal.vue   |  4 +++-
 .../features_panel/features_panel.vue         |  4 ++--
 .../follow_requests/follow_requests.vue       |  4 ++--
 src/components/interactions/interactions.vue  |  4 ++--
 src/components/lists/lists.vue                |  4 +++-
 src/components/login_form/login_form.vue      |  2 +-
 src/components/mfa_form/recovery_form.vue     |  4 +++-
 src/components/mfa_form/totp_form.vue         |  4 +++-
 src/components/mobile_nav/mobile_nav.vue      |  4 ++--
 .../notifications/notifications.vue           |  4 ++--
 .../password_reset/password_reset.vue         |  4 +++-
 .../post_status_modal/post_status_modal.vue   |  4 +++-
 src/components/registration/registration.vue  |  4 +++-
 .../remote_user_resolver.vue                  |  4 +++-
 src/components/search/search.vue              |  4 ++--
 .../settings_modal/settings_modal.vue         |  4 ++--
 .../tabs/theme_tab/theme_preview.vue          |  4 ++--
 src/components/shout_panel/shout_panel.vue    |  4 ++--
 .../status_history_modal.vue                  |  4 +++-
 .../timeline_menu/timeline_menu.vue           |  4 ++--
 .../update_notification.vue                   |  4 ++--
 src/components/user_link/user_link.vue        | 20 +++++++++++--------
 src/components/user_profile/user_profile.vue  |  4 ++--
 .../user_reporting_modal.vue                  |  2 +-
 .../who_to_follow/who_to_follow.vue           |  4 +++-
 .../who_to_follow_panel.vue                   |  4 ++--
 src/panel.scss                                |  2 ++
 35 files changed, 87 insertions(+), 57 deletions(-)
 create mode 100644 changelog.d/misc-markup.fix
 create mode 100644 changelog.d/user-link.add

diff --git a/changelog.d/misc-markup.fix b/changelog.d/misc-markup.fix
new file mode 100644
index 00000000..7af934a2
--- /dev/null
+++ b/changelog.d/misc-markup.fix
@@ -0,0 +1 @@
+Fix small markup inconsistencies
diff --git a/changelog.d/user-link.add b/changelog.d/user-link.add
new file mode 100644
index 00000000..ca65aa5f
--- /dev/null
+++ b/changelog.d/user-link.add
@@ -0,0 +1 @@
+Make UserLink wrappable
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index 25f830ff..44e2cf46 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/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
diff --git a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue b/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
index b6a768d4..709df402 100644
--- a/src/components/bookmark_folder_edit/bookmark_folder_edit.vue
+++ b/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">
diff --git a/src/components/bookmark_folders/bookmark_folders.vue b/src/components/bookmark_folders/bookmark_folders.vue
index d92e95df..fdd46106 100644
--- a/src/components/bookmark_folders/bookmark_folders.vue
+++ b/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"
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index b33ea67e..24bbc9f4 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/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"
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 526de5c3..1c290b90 100644
--- a/src/components/conversation/conversation.vue
+++ b/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"
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 3bceff22..93b8ac0f 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/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" />
diff --git a/src/components/edit_status_modal/edit_status_modal.vue b/src/components/edit_status_modal/edit_status_modal.vue
index db62972d..5001bd46 100644
--- a/src/components/edit_status_modal/edit_status_modal.vue
+++ b/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"
diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue
index 4cdf56d0..cde8d6e4 100644
--- a/src/components/features_panel/features_panel.vue
+++ b/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>
diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue
index 41f19db8..b678364c 100644
--- a/src/components/follow_requests/follow_requests.vue
+++ b/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
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index a2c56af4..1e2efe40 100644
--- a/src/components/interactions/interactions.vue
+++ b/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"
diff --git a/src/components/lists/lists.vue b/src/components/lists/lists.vue
index b8bab0a0..05df5b72 100644
--- a/src/components/lists/lists.vue
+++ b/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' }"
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index adc2dd5b..3c152b2e 100644
--- a/src/components/login_form/login_form.vue
+++ b/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">
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 27184fb4..f8c3e6a0 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/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">
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 3ec617e9..26fc1e80 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/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">
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 76a90d3e..b737155e 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/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"
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 87e7b68d..387c3a84 100644
--- a/src/components/notifications/notifications.vue
+++ b/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"
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 037b859e..5392f487 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/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
diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue
index bc2cad4a..2bdf41d5 100644
--- a/src/components/post_status_modal/post_status_modal.vue
+++ b/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"
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index a2008d87..cb0209ec 100644
--- a/src/components/registration/registration.vue
+++ b/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"
diff --git a/src/components/remote_user_resolver/remote_user_resolver.vue b/src/components/remote_user_resolver/remote_user_resolver.vue
index 07aac169..cbd4d19c 100644
--- a/src/components/remote_user_resolver/remote_user_resolver.vue
+++ b/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>
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index bd384ad3..00e700cf 100644
--- a/src/components/search/search.vue
+++ b/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
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 90dbbde0..b9f7c355 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/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"
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
index dbaecee4..4446c18b 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
+++ b/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>
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 9113211e..67927df8 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/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
diff --git a/src/components/status_history_modal/status_history_modal.vue b/src/components/status_history_modal/status_history_modal.vue
index 79642e9c..d89f4959 100644
--- a/src/components/status_history_modal/status_history_modal.vue
+++ b/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
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index bdcfb73d..717c8a8e 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/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"
diff --git a/src/components/update_notification/update_notification.vue b/src/components/update_notification/update_notification.vue
index 78e70a74..6fc363d4 100644
--- a/src/components/update_notification/update_notification.vue
+++ b/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
diff --git a/src/components/user_link/user_link.vue b/src/components/user_link/user_link.vue
index efd96e12..80b941d3 100644
--- a/src/components/user_link/user_link.vue
+++ b/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>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 1ec12d0c..86b211bf 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/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>
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 2bda509a..100d1e7f 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/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"
         >
diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue
index 56543d91..7cb4d476 100644
--- a/src/components/who_to_follow/who_to_follow.vue
+++ b/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
diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue
index 0fecec0b..92d6f6d7 100644
--- a/src/components/who_to_follow_panel/who_to_follow_panel.vue
+++ b/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
diff --git a/src/panel.scss b/src/panel.scss
index e974e7f6..47d55aa4 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -115,6 +115,8 @@
 
   .title {
     font-size: 1.3em;
+    margin: 0;
+    font-weight: normal;
   }
 
   .alert {