feat: rework vertical spacing (#533)

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" />

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 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 pb1>
+    <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"
             />
-          </StatusSpoiler>
             <StatusCard
               v-if="status.reblog"
               :status="status.reblog" border="~ rounded"
               :actions="false"
             />
+            <div v-if="isDM" />
+          </StatusSpoiler>
         </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>

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>

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;