finxol.io
Personal blog
finxol.io
blog
fix: properly align elements
+18
-16
+17
-15
app/components/BskyComments.vue
+17
-15
app/components/BskyComments.vue
···
29
29
30
30
<template>
31
31
<div class="md:w-[80%] mx-auto mt-16">
32
-
<div class="flex items-baseline gap-4">
32
+
<div class="flex items-baseline flex-col md:flex-row md:gap-4 mb-2 md:mb-0">
33
33
<h3 class="font-bold text-xl">Join the conversation!</h3>
34
-
<p class="text-gray-500 text-sm" title="Replies">
35
-
<Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
36
-
{{post.post.replyCount}}
37
-
</p>
38
-
<p class="text-gray-500 text-sm" title="Likes">
39
-
<Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
40
-
<span>
41
-
{{post.post.likeCount}}
42
-
</span>
43
-
</p>
44
-
<p class="text-gray-500 text-sm" title="Bookmarks">
45
-
<Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
46
-
{{post.post.bookmarkCount}}
47
-
</p>
34
+
<div class="flex items-center gap-2">
35
+
<p class="text-gray-500 text-sm" title="Replies">
36
+
<Icon name="ri:reply-line" class="-mb-[2px] mr-1" />
37
+
{{post.post.replyCount}}
38
+
</p>
39
+
<p class="text-gray-500 text-sm" title="Likes">
40
+
<Icon name="ri:heart-3-line" class="-mb-[2px] mr-1" />
41
+
<span>
42
+
{{post.post.likeCount}}
43
+
</span>
44
+
</p>
45
+
<p class="text-gray-500 text-sm" title="Bookmarks">
46
+
<Icon name="ri:bookmark-line" class="-mb-[2px] mr-1" />
47
+
{{post.post.bookmarkCount}}
48
+
</p>
49
+
</div>
48
50
</div>
49
51
50
52
<p class="text-gray-600 text-md mb-6">
+1
-1
app/pages/posts/[...slug].vue
+1
-1
app/pages/posts/[...slug].vue
···
95
95
<BskyComments v-if="post.bskyCid" :cid="post.bskyCid" />
96
96
97
97
<template #fallback>
98
-
<h1 class="text-xl font-bold text-stone-600">Loading comments...</h1>
98
+
<h1 class="md:w-[80%] mx-auto mt-16 text-xl font-bold text-stone-600">Loading comments...</h1>
99
99
</template>
100
100
</Suspense>
101
101