feat(symbol-page): split header into 2 rows so PeriodTabs has room on mobile

The single-row header packed nav + 비교/공유/Star + 7-tab PeriodTabs side by
side. On narrow widths the line wrapped with PeriodTabs landing mid-row, which
looked broken. Move PeriodTabs to its own row underneath, right-aligned with
overflow-x-auto fallback. Action group keeps flex-wrap as a defensive fallback.

Pure layout — no behavior change.
This commit is contained in:
claude-owner
2026-05-29 00:46:20 +09:00
parent 7312d0aadc
commit faa0163089

View File

@@ -182,7 +182,14 @@ export default function CodePage({ params }: { params: { code: string } }) {
return ( return (
<main className="mx-auto max-w-5xl px-6 py-8"> <main className="mx-auto max-w-5xl px-6 py-8">
<div className="mb-4 flex items-center justify-between gap-3"> {/*
헤더 액션 바 — 2 행 구조:
1행) 좌: 페이지 nav 링크 (← 검색 / 관심종목), 우: 종목 액션 (비교/공유/Star)
2행) PeriodTabs (7 탭) 단독 — 항상 우측 정렬
한 줄에 nav+액션+7탭 을 모두 넣으면 모바일에서 wrap 되며 PeriodTabs 가 줄 중간에
끼어 어색해짐. 2행 분리 + flex-wrap + overflow-x-auto 로 모든 폭에서 일관.
*/}
<div className="mb-2 flex flex-wrap items-center justify-between gap-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300"> <Link href="/" className="text-xs text-zinc-500 hover:text-zinc-300">
@@ -194,7 +201,7 @@ export default function CodePage({ params }: { params: { code: string } }) {
</Link> </Link>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex flex-wrap items-center justify-end gap-3">
<Link <Link
href={`/compare?codes=${code}`} href={`/compare?codes=${code}`}
className="rounded-md border border-zinc-700 px-2 py-0.5 text-[11px] text-zinc-400 hover:border-zinc-500 hover:text-zinc-200" className="rounded-md border border-zinc-700 px-2 py-0.5 text-[11px] text-zinc-400 hover:border-zinc-500 hover:text-zinc-200"
@@ -204,9 +211,11 @@ export default function CodePage({ params }: { params: { code: string } }) {
</Link> </Link>
<ShareButton code={code} name={chart?.name} /> <ShareButton code={code} name={chart?.name} />
<StarButton code={code} name={chart?.name} /> <StarButton code={code} name={chart?.name} />
<PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
</div> </div>
</div> </div>
<div className="mb-4 flex justify-end overflow-x-auto">
<PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
</div>
{err && <div className="mb-4 text-sm text-red-400"> : {err}</div>} {err && <div className="mb-4 text-sm text-red-400"> : {err}</div>}