From faa01630892f990d23bdc5cce987dbdd6353e408 Mon Sep 17 00:00:00 2001
From: claude-owner <claude-owner@ejclaw.local>
Date: Fri, 29 May 2026 00:46:20 +0900
Subject: [PATCH] feat(symbol-page): split header into 2 rows so PeriodTabs has
 room on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 web/app/[code]/page.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/app/[code]/page.tsx b/web/app/[code]/page.tsx
index 4ce88e0..beedecb 100644
--- a/web/app/[code]/page.tsx
+++ b/web/app/[code]/page.tsx
@@ -182,7 +182,14 @@ export default function CodePage({ params }: { params: { code: string } }) {
 
   return (
     <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">
           <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>
         </div>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center justify-end gap-3">
           <Link
             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"
@@ -204,9 +211,11 @@ export default function CodePage({ params }: { params: { code: string } }) {
           </Link>
           <ShareButton code={code} name={chart?.name} />
           <StarButton code={code} name={chart?.name} />
-          <PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
         </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>}