[touyou]

🤖 Generated with Claude Code

https://claude.ai/code/session_016SVVD5E6nsRMU6HXqyY3R1

概要

#372 の修正を 1.x（React 18 メンテナンスライン）に backport します。CardHeader の幅が足りないと、日本語の CardTitle が 1 文字幅まで縮んで縦書きになる不具合です（#371）。

git cherry-pick -x 3e9b91d で取り込みました。v1 の Card は React.forwardRef のままなので、衝突した index.tsx はクラス名の変更だけを手で当てています（ref-as-prop は持ち込んでいません）。

変更内容

• CardHeader / CardTitle を flex-wrap に、CardControl に ml-auto を追加
• 単体テストにクラスのアサーションを追加
• 幅 260px で見出しが 1 行に収まることを確かめる NarrowHeader ストーリー（play）を追加
• CHANGELOG の Unreleased / Fixed に追記

コミットメッセージには「JSDoc アンチパターンに追加」とありますが、main 側でガイドラインに合わせて取り下げた（#372 の 7634407）ので、この PR には JSDoc の変更を入れていません。amend + force-push はしない方針のため、メッセージはそのままです。

動作確認

• pnpm lint（warning のみ）/ prettier
• vitest --project unit src/components/ui/card: 33 passed
• vitest --project storybook src/components/ui/card: NarrowHeader を含む 4 件 passed
  • v1 の lockfile では vitest 4.1.0 と @vitest/browser-playwright 4.1.8 がずれていて、Snapshots の export が無いという unhandled error が 1 件出ます。この PR とは関係なく、v1 の既存の状態です

関連 Issue

• CardHeader の幅が足りないと、日本語の CardTitle が 1 文字幅まで縮んで縦書きになる #371
• 🐛 fix(card): 狭い幅で CardTitle が縦書きになる不具合を直す #372（main 向け）

---

Generated by Claude Code

[vercel]

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

Project	Deployment	Actions	Updated
sparkle-design	Ready	Preview	Oct 29, 2026 8:46am UTC

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

Run configuration

• Source mode: Auto
• Repository: Unavailable
• Branch: Unavailable
• File: No configuration file from this repository applied
• Commit: Unavailable
• Layers: Organization UI
• Review profile: CHILL
• Plan: Essentials
• Run ID: 0e85b215-7307-4b38-b80c-90f7b0808926

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-29T08:47:41.070781Z	ff09f1b	PR opened
🔒 Security Review	✅ Completed 2026-10-29T08:47:37.887651Z	ff09f1b	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[Copilot]

🟢 Approval recommended

No active review issues are reported for the Card layout backport addressing narrow-width Japanese heading wrapping.

No open issues 🎉

What changed in this PR

#372 の Card レイアウト修正を、React 18 の 1.x メンテナンスラインへ backport する PR です。既存の React.forwardRef を維持し、狭い幅で日本語の見出しが 1 文字ずつ折り返される問題（#371）に対応します。

Changes:

• CardHeader / CardTitle に折り返しを追加し、CardControl を右寄せに変更。
• レイアウトクラスの単体テストと、幅 260px で見出しが 1 行に収まることを検証する Storybook ストーリーを追加。
• CHANGELOG の Unreleased / Fixed に修正内容を記載。

File	Description
src/​components/​ui/​card/​index.tsx	ヘッダーとタイトルの折り返し、操作領域の右寄せを追加。
src/​components/​ui/​card/​index.test.tsx	追加したレイアウトクラスのアサーションを追加。
src/​components/​ui/​card/​index.stories.tsx	狭幅での見出し表示を検証する NarrowHeader を追加。
CHANGELOG.md	狭幅での CardTitle 表示不具合の修正を記録。

_{Review effort: Balanced}