Skip to content

fix: 모바일에서 MDX 테이블이 한 글자씩 wrap되는 회귀 차단 (#36)#37

Merged
chan9yu merged 1 commit into
mainfrom
develop
May 11, 2026
Merged

fix: 모바일에서 MDX 테이블이 한 글자씩 wrap되는 회귀 차단 (#36)#37
chan9yu merged 1 commit into
mainfrom
develop

Conversation

@chan9yu
Copy link
Copy Markdown
Owner

@chan9yu chan9yu commented May 11, 2026

변경 사항

  • MdxTable.tsx<table> 클래스 w-fullmin-w-full 변경 (wrapper가 폭 결정)
  • .prose table { width: 100% } 제거, .prose th, .prose tdmin-width: 8rem + word-break: keep-all + overflow-wrap: anywhere 적용
  • 발생 조건: 4컬럼 + 짧은 헤더(≤3자) + 긴 인라인 코드 셀 동반 시 CSS auto table-layout이 짧은 헤더 컬럼을 43px까지 압축 → 한국어가 음절 단위로 한 글자씩 wrap

closes #36

관련 문서

해당 없음 — 렌더링 레이어 버그 픽스

테스트

  • pnpm lint 통과 (lefthook pre-commit hook으로 자동 검증)
  • pnpm build 성공 (24개 포스트 SSG 정상)
  • 개발 서버에서 동작 확인 (5개 뷰포트 × 12개 포스트 × 44+개 테이블 sweep, 회귀 0건)
  • 가로 스크롤 끝점 도달 가능 확인 (iPhone SE 375px에서 마지막 셀 viewportFit: true)

머지 정책: merge commit 또는 rebase merge로 머지 부탁드립니다 (squash 금지 — .claude/rules/workflow.md)

- MdxTable.tsx: <table>의 w-full → min-w-full (wrapper가 폭 결정)
- prose.css: .prose table width:100% 제거, th/td에 min-width:8rem +
  word-break:keep-all + overflow-wrap:anywhere 적용
- 발생 조건: 4컬럼+짧은 헤더+긴 인라인 코드 셀 동반 시 table-layout:auto
  알고리즘이 짧은 헤더 컬럼을 43px까지 압축 → 한국어가 음절 단위로 한 글자씩 wrap
- 회귀 검증: 5개 뷰포트(375·412·430·768·1280) × 12개 포스트 × 44+개 테이블
  sweep 통과, 가로 스크롤 끝점 도달 가능 확인
- closes #36

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown

vercel Bot commented May 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
chan9yu-blog Ready Ready Preview, Comment May 11, 2026 4:34am

@chan9yu chan9yu merged commit 7dc7e4c into main May 11, 2026
5 checks passed
chan9yu added a commit that referenced this pull request May 11, 2026
- package.json 1.1.7 → 1.1.8
- CHANGELOG [1.1.8] 섹션 추가
- 본 릴리즈는 closes #36, merged via #37 의 후속 hotfix release commit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug: 모바일에서 4컬럼+짧은 헤더+인라인 코드 셀 조합 MDX 테이블이 한 글자씩 wrap되는 회귀

1 participant