From 17fecebcae3c7942d97ce86d22c6b6c0de5202ae Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Sat, 31 Dec 2022 13:26:52 +0100
Subject: [PATCH] fix: NavUser avatar height on small screens

---
 components/main/MainContent.vue    | 5 +++--
 components/nav/NavUser.vue         | 3 ++-
 components/nav/NavUserSkeleton.vue | 3 +++
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 components/nav/NavUserSkeleton.vue

diff --git a/components/main/MainContent.vue b/components/main/MainContent.vue
index 4a1501b0..4929fd65 100644
--- a/components/main/MainContent.vue
+++ b/components/main/MainContent.vue
@@ -14,8 +14,8 @@ defineProps<{
       pt="[env(safe-area-inset-top,0)]"
       border="b base" bg="[rgba(var(--c-bg-base-rgb),0.7)]"
     >
-      <div flex justify-between px5 py4>
-        <div flex gap-3 items-center overflow-hidden>
+      <div flex justify-between px5 py2>
+        <div flex gap-3 items-center overflow-hidden py2>
           <NuxtLink
             v-if="backOnSmallScreen || back" flex="~ gap1" items-center btn-text p-0
             :class="{ 'lg:hidden': backOnSmallScreen }"
@@ -32,6 +32,7 @@ defineProps<{
           <slot name="actions" />
           <PwaBadge lg:hidden />
           <NavUser v-if="isMastoInitialised" />
+          <NavUserSkeleton v-else />
         </div>
       </div>
       <slot name="header" />
diff --git a/components/nav/NavUser.vue b/components/nav/NavUser.vue
index ebffe03c..6944978c 100644
--- a/components/nav/NavUser.vue
+++ b/components/nav/NavUser.vue
@@ -4,7 +4,8 @@
       <AccountAvatar
         ref="avatar"
         :account="currentUser.account"
-        h="2em"
+        h-8
+        w-8
         :draggable="false"
       />
     </div>
diff --git a/components/nav/NavUserSkeleton.vue b/components/nav/NavUserSkeleton.vue
new file mode 100644
index 00000000..944af9be
--- /dev/null
+++ b/components/nav/NavUserSkeleton.vue
@@ -0,0 +1,3 @@
+<template>
+  <div bg-base h-8 w-8 rounded-full />
+</template>