feat: floating back button for xl

components/main/MainContent.vue

@@ -14,7 +14,7 @@ defineProps<{
       pt="[env(safe-area-inset-top,0)]"
       border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
-      <div :class="{ 'xl:hidden': !back }" flex justify-between px5 py2>
+      <div xl:hidden flex justify-between px5 py2>
         <div flex gap-3 items-center overflow-hidden py2>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0

components/nav/NavTitle.vue

@@ -6,6 +6,7 @@ const { env } = buildInfo
 
 <template>
   <!-- Use external to force refresh page and jump to top of timeline -->
+  <div flex justify-between>
     <NuxtLink
       flex items-end gap-4
       py2 px-5
@@ -19,4 +20,12 @@ const { env } = buildInfo
         {{ $t('app_name') }} <sup text-sm italic text-secondary mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
+    <div hidden xl:flex items-center me-8 mt-2>
+      <NuxtLink
+        @click="$router.go(-1)"
+      >
+        <div i-ri:arrow-left-line class="rtl-flip" btn-text />
+      </NuxtLink>
+    </div>
+  </div>
 </template>

pages/[[server]]/@[account]/[status].vue

@@ -61,7 +61,7 @@ onReactivated(() => {
 <template>
   <MainContent back>
     <template v-if="!pending">
-      <div v-if="status" mt--1px border="b base" mb="50vh">
+      <div v-if="status" xl:mt-4 border="b base" mb="50vh">
         <template v-for="comment of context?.ancestors" :key="comment.id">
           <StatusCard
             :status="comment" :actions="comment.visibility !== 'direct'" context="account"