From 97b1a48a2505e5b1fe7f7faf74dcd96d8187a5cf Mon Sep 17 00:00:00 2001
From: pythongosssss <125205205+pythongosssss@users.noreply.github.com>
Date: Thu, 15 Jan 2026 00:51:21 +0000
Subject: [PATCH] Fix avatar using fallback icon not being square (#8060)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

When no user avatar image url exists / it fails to load, there is a
fallback to a user icon which does not render as a square in the tab bar
menu section.

## Changes
- set avatar to be square in compact mode

## Screenshots (if applicable)
Before:
<img width="193" height="37" alt="Screen Shot 2026-01-14 at 16 26 28"
src="https://github.com/user-attachments/assets/eb2e3723-4642-4184-9d0c-f7fb11b1a3ea"
/>

After:
<img width="201" height="37" alt="Screen Shot 2026-01-14 at 16 25 57"
src="https://github.com/user-attachments/assets/fb7bea2d-91cc-47e1-9076-4ec1a01ff923"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8060-Fix-avatar-using-fallback-icon-not-being-square-2e96d73d365081ea802bfbfdafdb1034)
by [Unito](https://www.unito.io)
---
 src/components/topbar/CurrentUserButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/topbar/CurrentUserButton.vue b/src/components/topbar/CurrentUserButton.vue
index 44233aac5..151dfd405 100644
--- a/src/components/topbar/CurrentUserButton.vue
+++ b/src/components/topbar/CurrentUserButton.vue
@@ -12,7 +12,7 @@
         :class="
           cn(
             'flex items-center gap-1 rounded-full hover:bg-interface-button-hover-surface justify-center',
-            compact && 'size-full '
+            compact && 'size-full aspect-square'
           )
         "
       >