From 64a6c7f7ea80ff97b70559181b2e23f84fb1ddcd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90?= <sxzz@sxzz.moe>
Date: Fri, 25 Nov 2022 15:49:43 +0800
Subject: [PATCH] fix: status card on mobile device

closes #79
---
 components/status/StatusAccountDetails.vue |  2 +-
 components/status/StatusActions.vue        | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/status/StatusAccountDetails.vue b/components/status/StatusAccountDetails.vue
index 44af5735..43e07082 100644
--- a/components/status/StatusAccountDetails.vue
+++ b/components/status/StatusAccountDetails.vue
@@ -10,7 +10,7 @@ const accountHandle = $(useAccountHandle(account))
 </script>
 
 <template>
-  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex gap-2 items-center>
+  <NuxtLink :to="link ? getAccountPath(account) : undefined" flex="~ row wrap" gap-x-2 items-center>
     <ContentRichSetup font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
     <p op35 text-sm>
       {{ accountHandle }}
diff --git a/components/status/StatusActions.vue b/components/status/StatusActions.vue
index 9746e9ec..9d648f0a 100644
--- a/components/status/StatusActions.vue
+++ b/components/status/StatusActions.vue
@@ -121,7 +121,7 @@ function mention() {
 </script>
 
 <template>
-  <div flex justify-between gap-8>
+  <div flex justify-between>
     <CommonTooltip placement="bottom" content="Reply">
       <RouterLink :to="getStatusPath(status)">
         <StatusActionButton
@@ -180,11 +180,10 @@ function mention() {
 
     <CommonDropdown placement="bottom">
       <CommonTooltip placement="bottom" content="More">
-        <button flex gap-1 items-center rounded op50 hover="op100 text-purple" group>
-          <div rounded-full p2 group-hover="bg-purple/10">
-            <div i-ri:more-line />
-          </div>
-        </button>
+        <StatusActionButton
+          color="text-purple" hover="text-purple" group-hover="bg-purple/10"
+          icon="i-ri:more-line"
+        />
       </CommonTooltip>
 
       <template #popper>