Comfy-Org / Comfy-Org/ComfyUI_frontend
fix: Unify UserAvatar compact class to size-full to prevent width shift when toggling workspaces
- 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
Assessment
This issue has not been assessed yet.