Skip to content

feat: responsive layout (mobile vertical stack) - #27

Merged
kanare-dev merged 1 commit into
mainfrom
feature/responsive
Mar 28, 2026
Merged

feat: responsive layout (mobile vertical stack)#27
kanare-dev merged 1 commit into
mainfrom
feature/responsive

Conversation

@kanare-dev

Copy link
Copy Markdown
Member

Summary

  • 768px未満の画面幅でカラムを縦積みに切り替え
  • モバイル:原文 → ▼ → 文体を選ぶ → ▼ → 変換後 の縦レイアウト
  • サイドバーはモバイルで非表示
  • テキストエリア高さ180px固定、スタイルリスト最大260pxスクロール、出力エリア最小200px
  • デスクトップの3カラムレイアウトは変更なし
  • Biome cognitive complexity 解消のため各パネルをコンポーネントに分割

Test plan

  • デスクトップ幅で3カラムレイアウトが正常表示されること
  • 768px未満で縦積みレイアウトに切り替わること
  • モバイルでスタイルリストがスクロールできること
  • 変換フローが全幅で正常動作すること
  • bun run test:ci がパスすること

🤖 Generated with Claude Code

- Add isMobile hook (window resize listener) for 768px breakpoint
- Mobile: vertical stack (原文 → ▼ → 文体 → ▼ → 変換後), sidebar hidden,
  textarea fixed 180px height, style list max 260px scroll, output min 200px
- Desktop: original 3-column horizontal layout unchanged
- Extract InputPanel / StylePanel / OutputPanel / OutputBody / StyleBadge /
  CopyButton / FlowArrow / PanelHeader components to stay within
  Biome cognitive complexity limit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@vercel

vercel Bot commented Mar 28, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
hackathon Ready Ready Preview, Comment Mar 28, 2026 11:25am

@kanare-dev
kanare-dev merged commit c17b75f into main Mar 28, 2026
4 checks passed
@kanare-dev
kanare-dev deleted the feature/responsive branch March 28, 2026 11:25
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.

1 participant