feat(symbol-page): PeriodTabs overflow fix + fullscreen chart symbol label

- page.tsx: wrap PeriodTabs in overflow-x-auto + inner flex w-max min-w-full
  justify-end so the leftmost tab is reachable when content exceeds container
  (justify-end + overflow-x-auto alone clips negative direction in some browsers).
- StockChart: when fullscreen, render small "{name} {code}" leading label in the
  toolbar — PriceHero is covered by the fixed inset overlay so the chart loses
  symbol context otherwise. Toolbar (not canvas) so it doesn't overlap the
  existing CrosshairLabel at top-left of the chart area.
This commit is contained in:
claude-owner
2026-05-29 00:51:13 +09:00
parent faa0163089
commit a6cd6f3a35
2 changed files with 22 additions and 2 deletions

View File

@@ -930,6 +930,18 @@ export function StockChart({ chart, prediction, targets }: Props) {
return (
<div ref={wrapperRef} className={wrapperCls}>
<div className="mb-1 flex flex-wrap items-center gap-1.5 px-1">
{/*
전체화면 모드 한정 종목 라벨 — 일반 모드는 위에 PriceHero 가 종목명/코드를 크게 보여주지만
fullscreen 은 fixed inset 으로 PriceHero 가 가려져서 무슨 종목 차트인지 식별이 어려워짐.
툴바 leading 자리에 작은 라벨을 끼워 시각적 노이즈 최소로 보완.
(캔버스 위의 CrosshairLabel 과 위치 겹치지 않도록 캔버스가 아닌 툴바에 둠.)
*/}
{fullscreen && (
<span className="mr-1 flex items-baseline gap-1.5 text-xs">
<span className="font-semibold text-zinc-100">{chart.name}</span>
<span className="font-mono text-[10px] text-zinc-500">{chart.code}</span>
</span>
)}
{showSma && (
<>
{SMA_PRESETS.map((p) => {