Error - 클리핑(Clipping) 현상

Error

 

 

✅ Clipping 현상이란?

---

쉽게 말해 부모 영역 밖으로 나가는 부분이 잘려 보이는 것.

(어떤 영역이 잘려서 안 보이는 현상)

 

위 사진의 Card component의 border를 자세히 보면 그려지다만 부분들이 보인다.

 

<SidebarProvider className="flex h-[calc(100vh-14rem)] max-h-[calc(100vh-14rem)] min-h-full overflow-hidden">

현재 Provider에 overflow-hidden 속성이 존재하기 때문에 자식 요소가 Provider의 영역을 넘어가거나 경계에 존재할 시 보이지 않게 한다.

 

그래서 이럴 때는 온전히 border가 보이기 위해 자식 요소에 padding을 주면 border가 잘 보이게 된다.

export default function MessagesLayout() {
  return (
    <SidebarProvider className="flex h-[calc(100vh-14rem)] max-h-[calc(100vh-14rem)] min-h-full overflow-hidden">
      <Sidebar className="pt-16" variant="floating">
        <SidebarContent>
          <SidebarGroup>
            <SidebarMenu>
              {Array.from({ length: 20 }).map((_, index) => (
                <MessagesCard
                  key={index}
                  id={index.toString()}
                  name={`User ${index}`}
                  avatarUrl="https://github.com/serranoarevalo.png"
                  lastMessage={`Last message ${index}`}
                />
              ))}
            </SidebarMenu>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <div className="flex-1 p-4">
        <Outlet />
      </div>
    </SidebarProvider>
  );
}

p-4를 주어서 자식 요소 공간에 여유를 주었다.

 

p-4 적용

 

 

잘 보이는 모습