CODE_ASSISTANT/docs/troubleshootings/2026-07-27-snap-codefence-overflow.md

snap 답변의 ASCII 다이어그램이 말풍선 밖으로 튀어나감

증상

• 챗봇 답변에 든 ASCII 다이어그램(┌───┐ 박스 라인)이 회색 인라인 코드 배경으로 줄줄이 렌더되면서 말풍선 오른쪽 밖으로 넘침

원인

• Message.tsx 가 pre 를 fragment 로 언랩(pre: ({children}) => <>{children}</>)하고, 코드펜스는 code 컴포넌트의 language-* className 매칭으로만 CodeBlock 처리하고 있었음
• 언어 라벨 없는 코드펜스(LLM 이 ``` 만 쓰고 다이어그램 넣는 경우)는 className 이 없어서 인라인 code 분기로 떨어짐 → <pre> 없는 인라인 코드가 됨
• 인라인은 공백에서만 줄바꿈되는데 ───── 연속 문자는 줄바꿈 지점이 없어서 그대로 overflow
• react-markdown v10 은 v8 의 inline prop 이 없어짐 — className 만으로 블록/인라인 구분하면 이 케이스가 샘

수정

• Message.tsx: 블록 코드 판별을 pre 컴포넌트로 이동 — 펜스는 언어 유무와 무관하게 전부 CodeBlock(overflow-auto 스크롤 컨테이너)으로. code 는 순수 인라인만 담당
• 재현 테스트: Message.test.tsx (언어 없는 펜스 → CodeBlock, 언어 있는 펜스 유지, 인라인 유지)
• StreamingText.tsx 는 pre 를 살려두고 overflow-x-auto 도 있어서 무관 — 안 건드림

교훈

• react-markdown 에서 "블록 코드 = pre 의 자식" 이 유일하게 안전한 구분 기준. language-* className 은 언어 없는 펜스에서 빠짐
• pre 를 언랩할 거면 언어 없는 펜스가 어디로 떨어지는지 반드시 확인