fix: adjust "Pinned post" position and styling

elk-zone · Apr 8, 2024 · 483c5b4 · 483c5b4
1 parent cb06094
commit 483c5b4
Showing 1 changed file with 13 additions and 13 deletions.
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
@@ -76,6 +76,19 @@ const forceShow = ref(false)
     <div :h="showUpperBorder ? '1px' : '0'" w-auto bg-border mb-1 />
 
     <slot name="meta">
+      <!-- Pinned status -->
+      <div flex="~ col" justify-between>
+        <div
+          v-if="isPinned"
+          flex="~ gap2" items-center h-auto text-sm text-orange
+          m="is-5" p="t-1 is-5"
+          relative text-secondary ws-nowrap
+        >
+          <div i-ri:pushpin-line />
+          <span>Pinned post</span>
+        </div>
+      </div>
+
       <!-- Line connecting to previous status -->
       <template v-if="status.inReplyToAccountId">
         <StatusReplyingTo
@@ -114,19 +127,6 @@ const forceShow = ref(false)
           <AccountInlineInfo font-bold :account="rebloggedBy" :avatar="false" text-sm />
         </div>
       </div>
-
-      <!-- Pinned status -->
-      <div flex="~ col" justify-between>
-        <div
-          v-if="isPinned"
-          flex="~" items-center
-          p="t-1 b-0.5 x-1px"
-          relative text-secondary ws-nowrap
-        >
-          <div i-ri:pushpin-line mx-1 text-orange w-16px h-16px />
-          <span text-primary>Pinned post</span>
-        </div>
-      </div>
     </slot>
 
     <div flex gap-3 :class="{ 'text-secondary': inNotification }">