Comfy-Org / Comfy-Org/ComfyUI_frontend

fix: Unify UserAvatar compact class to size-full to prevent width shift when toggling workspaces

Open
#9,689 0 comments 0 reactions 1 assignee Claimed by @dante01yoon View on GitHub
area:ui
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Summary

In `src/components/topbar/CurrentUserButton.vue`, when in `compact` mode there is a size mismatch between `WorkspaceProfilePic` and `UserAvatar`:

- `WorkspaceProfilePic` uses `size-full` (width: 100%; height: 100%)
- `UserAvatar` uses `h-full w-auto` (height: 100%; width: auto)

This inconsistency can cause a minor width shift when toggling between personal and team workspaces in the compact topbar layout, since `h-full w-auto` lets the width float freely while `size-full` locks both axes to the parent container.

## Proposed Fix

Change `UserAvatar`'s compact class from `h-full w-auto` to `size-full` to match `WorkspaceProfilePic`'s behavior. `UserAvatar` wraps PrimeVue's `` which already enforces `aspect-square`, so `size-full` is safe to use:

```vue

```

This ensures zero width delta when toggling between personal ↔ team workspace avatars in the compact topbar layout.

## References

- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9687
- Comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9687#discussion_r2908878856

Requested by: @dante01yoon

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9689-fix-Unify-UserAvatar-compact-class-to-size-full-to-prevent-width-shift-when-toggling--31f6d73d365081a0a239c97ee9984bc5) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.