diff --git a/components/status/StatusContent.vue b/components/status/StatusContent.vue
index 9a82475b..b4a842ac 100644
--- a/components/status/StatusContent.vue
+++ b/components/status/StatusContent.vue
@@ -23,8 +23,8 @@ const isFiltered = $computed(() => filterPhrase && (context && context !== 'deta
   <div
     space-y-3
     :class="{
-      'pt2 pb0.5 px3.5 bg-fade border-1 border-primary-light rounded-5 mx--1': isDM,
-      'ms--3.5 mt--1': isDM && context !== 'details',
+      'pt2 pb0.5 px3.5 bg-fade border-1 border-primary-light rounded-5 me--1': isDM,
+      'ms--3.5 mt--1 ms--1': isDM && context !== 'details',
     }"
   >
     <StatusBody v-if="!isFiltered && status.sensitive && !status.spoilerText" :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index f8706cb4..a640358d 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -30,7 +30,7 @@ const isDM = $computed(() => status.visibility === 'direct')
 </script>
 
 <template>
-  <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 px-4 relative :lang="status.language ?? undefined">
+  <div :id="`status-${status.id}`" flex flex-col gap-2 pt2 pb1 ps-3 pe-4 relative :lang="status.language ?? undefined">
     <StatusActionsMore :status="status" absolute inset-ie-2 top-2 />
     <NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pe5 me-a>
       <AccountHoverWrapper :account="status.account">