ShadCnのアバターが丸くならない時の対処法[Next.js, SCSS, ShadCn]

下のようにAvatorを使っていたときになぜかavatorが標準の丸い状態になっておらず、困ったのですが修正することができたのでその方法をメモとして残しておこうと思います。

index.tsx

<div className={style.icons}>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Avatar className={style.avatar}>
              <AvatarImage src={userIcon} />
              <AvatarFallback>CN</AvatarFallback>
            </Avatar>
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuLabel>{currentUser?.name}</DropdownMenuLabel>
            <DropdownMenuSeparator />
            <DropdownMenuItem asChild>
              <Link href="/profile">
                <User />
                <span>Profile</span>
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem asChild>
              <Link href="/profile/setting/user">
                <Settings />
                <span>setting</span>
              </Link>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
        <a href="/invite" className={style.icon}>
          <Invite size={60} />
          <span className={style.badge}>{inviteNum}</span>
        </a>
        <a href="/chat" className={style.icon}>
          <MailIcon count={mailNum} size={40} />
        </a>
      </div>

index.module.scss

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

解決方法

overflow:hiddenを追加するだけでいけました。

index.module.scss

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  overflow: hidden;
}

overflowはコンテンツがパディングボックスに収まらないときに使えるプロパティです。

hiddenはパディングボックスに収まるようにしてくれます。

他にも以下の設定を指定することができます。

設定	機能
visible	パディングボックスの外側にも表示されます。
hidden	溢れたコンテンツは要素のパディングボックスで切り取られます。
clip	溢れたコンテンツは、overflow-clip-margin プロパティで定義された要素のはみ出しクリップ辺で切り取られます。
scroll	溢れたコンテンツはスクロールさせることで表示させることができます。
auto	溢れたコンテンツは要素のパディングボックスで切り取られて、スクロールさせることができるようになります。

ぜひ困ったときに参考にしてください。