diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 72a6c24d..35a0add5 100644
--- a/components/status/StatusBody.vue
+++ b/components/status/StatusBody.vue
@@ -16,7 +16,7 @@ const { translation } = useTranslation(status)
:emojis="status.emojis"
:lang="status.language"
/>
- <div v-else h-3 />
+ <div v-else />
<template v-if="translation.visible">
<div my2 h-px border="b base" bg-base />
<ContentRich :content="translation.text" :emojis="status.emojis" />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 9ebf9a5c..cfd399d2 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -58,19 +58,21 @@ const isFiltered = $computed(() => filterPhrase && (props.context ? filter?.cont
const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvatarOnAvatar))
const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
+
+const isDM = $computed(() => status.visibility === 'direct')
</script>
<template>
- <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-2 px-4 pt-3 pb-4 transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
- <div flex justify-between pb1>
+ <div v-if="filter?.filterAction !== 'hide'" :id="`status-${status.id}`" ref="el" relative flex flex-col gap-1 px-4 pt-1 class="pb-1.5" transition-100 :class="{ 'hover:bg-active': hover }" tabindex="0" focus:outline-none focus-visible:ring="2 primary" @click="onclick" @keydown.enter="onclick">
+ <div flex justify-between>
<slot name="meta">
- <div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center>
+ <div v-if="rebloggedBy" text-secondary text-sm ws-nowrap flex="~" gap-1 items-center py1>
<div i-ri:repeat-fill mr-1 text-primary />
<AccountInlineInfo font-bold :account="rebloggedBy" :avatar="!avatarOnAvatar" />
</div>
<div v-else />
</slot>
- <StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" />
+ <StatusReplyingTo v-if="showReplyTo" :status="status" :class="faded ? 'text-secondary-light' : ''" py1 />
</div>
<div flex gap-4 :class="faded ? 'text-secondary' : ''">
<div relative>
@@ -103,9 +105,9 @@ const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAva
<StatusActionsMore :status="status" mr--2 />
</div>
<div
- space-y-2
+ space-y-3
:class="{
- 'my3 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
+ 'mt2 pt1 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': isDM,
}"
>
<StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
@@ -120,22 +122,21 @@ const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAva
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
- :class="status.visibility === 'direct' ? 'pb4' : ''"
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
- :class="status.visibility === 'direct' ? 'pb4' : ''"
:small-picture-only="status.mediaAttachments?.length > 0"
/>
+ <StatusCard
+ v-if="status.reblog"
+ :status="status.reblog" border="~ rounded"
+ :actions="false"
+ />
+ <div v-if="isDM" />
</StatusSpoiler>
- <StatusCard
- v-if="status.reblog"
- :status="status.reblog" border="~ rounded"
- :actions="false"
- />
</div>
- <StatusActions v-if="(actions !== false && !isZenMode)" pt2 :status="status" />
+ <StatusActions v-if="(actions !== false && !isZenMode)" :status="status" :class="isDM ? 'mt1' : 'mt2'" />
</div>
</div>
</div>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 31515af8..e1e4a0ad 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -21,10 +21,12 @@ const { t } = useI18n()
useHeadFixed({
title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
})
+
+const isDM = $computed(() => status.visibility === 'direct')
</script>
<template>
- <div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4 relative>
+ <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative>
<StatusActionsMore :status="status" absolute right-2 top-2 />
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account">
@@ -32,7 +34,10 @@ useHeadFixed({
</AccountHoverWrapper>
</NuxtLink>
<div
- :class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none' : ''"
+ space-y-3
+ :class="{
+ 'pt2 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3': isDM,
+ }"
>
<StatusSpoiler :enabled="status.sensitive">
<template #spoiler>
@@ -40,7 +45,7 @@ useHeadFixed({
{{ status.spoilerText }}
</p>
</template>
- <StatusBody :status="status" :with-action="false" text-2xl />
+ <StatusBody :status="status" :with-action="false" text-xl />
<StatusPoll
v-if="status.poll"
:poll="status.poll"
@@ -48,16 +53,15 @@ useHeadFixed({
<StatusMedia
v-if="status.mediaAttachments?.length"
:status="status"
- :class="status.visibility === 'direct' ? 'pb4' : ''"
full-size
/>
<StatusPreviewCard
v-if="status.card"
:card="status.card"
- :class="status.visibility === 'direct' ? 'pb4' : ''"
:small-picture-only="status.mediaAttachments?.length > 0"
mt-2
/>
+ <div v-if="isDM" />
</StatusSpoiler>
</div>
<div flex="~ gap-1" items-center text-secondary text-sm>
diff --git a/styles/global.css b/styles/global.css
index b7416316..fba73d15 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -98,7 +98,7 @@ body {
--at-apply: font-bold;
}
p {
- --at-apply: my-2;
+ --at-apply: my-1;
}
code {
--at-apply: bg-code text-code px1 py0.5 rounded text-0.9em leading-0.8em;