From 0ba7002d62fa8a81bbb94b33f83fb633d35002f1 Mon Sep 17 00:00:00 2001
From: webfansplz <308241863@qq.com>
Date: Tue, 29 Nov 2022 11:58:04 +0800
Subject: [PATCH] fix(ui): account info responsive design (#212)

---
 components/account/AccountInfo.vue | 4 ++--
 layouts/default.vue                | 2 ++
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 39e50c63..a0a82fcf 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -15,11 +15,11 @@ defineOptions({
 <!-- TODO: Make this work for both buttons and links -->
 <!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
-  <component :is="as" flex gap-3 v-bind="$attrs">
+  <component :is="as" flex gap-3 md:flex="col" v-bind="$attrs">
     <AccountHoverWrapper :disabled="!hoverCard" :account="account">
       <AccountAvatar :account="account" w-12 h-12 />
     </AccountHoverWrapper>
-    <div flex="~ col">
+    <div flex="~ col" break-words>
       <ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
       <AccountHandle :account="account" text-sm />
     </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index eb9adeb1..a05d01ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -29,6 +29,8 @@
               <button
                 m5 p2 rounded-full text-start w-full
                 hover:bg-active cursor-pointer transition-100
+                md:m-0
+                md:p-5
               >
                 <AccountInfo :account="currentUser.account" />
               </button>