[hotfix] 말풍선 위치 수정

[ff1451]

Summary by CodeRabbit

릴리스 노트

• 버그 수정
  • 메시지 레이아웃이 좁은 화면에서 올바르게 표시되도록 개선했습니다. 사용자 메시지 버블의 너비 계산이 더 안정적으로 작동합니다.
  • 타임스탐프 및 읽지 않은 메시지 카운트가 제약된 공간에서 의도하지 않게 축소되는 문제를 해결했습니다.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fdbbe08d-d1d7-42cf-a8f1-1ca1cd22362a

📥 Commits

Reviewing files that changed from the base of the PR and between fe3ba76 and 227d718.

📒 Files selected for processing (1)

• src/pages/Chat/ChatRoom.tsx

---

Walkthrough

ChatRoom.tsx의 사용자 메시지 레이아웃을 개선했습니다. flex 래퍼에서 비-flex 외부 <div>로 변경하고, 내부 컨테이너를 전체 너비 flex 레이아웃(flex w-full min-w-0 items-end justify-end)으로 조정했습니다. 읽지 않은 개수와 타임스탬프 요소에 shrink-0을 추가하여 너비 제약 조건에서 축소를 방지했고, 메시지 버블에 min-w-0을 추가하여 너비 계산을 개선했습니다.

Possibly related PRs

• [refactor] 채팅 UI 개선 #174: 동일 파일의 우측 정렬 메시지 컨테이너 구조와 min-w-0/max-w, shrink 동작을 수정하는 레이아웃 변경
• [fix] 따닥 이슈 해결 및 채팅 읽지 않은 사람 표시 추가 #129: 동일 파일의 메시지 레이아웃 중 타임스탬프/읽지 않은 개수 스택 및 정렬을 조정하는 변경

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 핵심을 명확하게 반영하고 있습니다. 채팅 말풍선 위치 수정이라는 주요 변경사항을 간결하게 표현했습니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 203-hotfix-채팅-말풍선-ui-수정

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}