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:
@@ -213,8 +213,16 @@ export default function CodePage({ params }: { params: { code: string } }) {
|
|||||||
<StarButton code={code} name={chart?.name} />
|
<StarButton code={code} name={chart?.name} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-4 flex justify-end overflow-x-auto">
|
{/*
|
||||||
<PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
|
PeriodTabs 가 좁은 폭에서 컨테이너보다 넓어질 때:
|
||||||
|
부모에 `justify-end` 를 직접 걸면 음수 방향으로 첫 탭이 잘려서 스크롤로도 접근이 어려움.
|
||||||
|
wrapper-of-wrapper 패턴 — 바깥은 overflow-x-auto 스크롤만, 안쪽 inline flex 가 폭에 맞춰
|
||||||
|
넓으면 좌측 정렬(스크롤 노출), 좁으면 우측 정렬(공간 차지 안 함). w-max + min-w-full 이 핵심.
|
||||||
|
*/}
|
||||||
|
<div className="mb-4 overflow-x-auto">
|
||||||
|
<div className="flex w-max min-w-full justify-end">
|
||||||
|
<PeriodTabs value={period} onChange={(id) => setPeriod(id)} />
|
||||||
|
</div>
|
||||||
</div>
|
</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>}
|
||||||
|
|||||||
@@ -930,6 +930,18 @@ export function StockChart({ chart, prediction, targets }: Props) {
|
|||||||
return (
|
return (
|
||||||
<div ref={wrapperRef} className={wrapperCls}>
|
<div ref={wrapperRef} className={wrapperCls}>
|
||||||
<div className="mb-1 flex flex-wrap items-center gap-1.5 px-1">
|
<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 && (
|
{showSma && (
|
||||||
<>
|
<>
|
||||||
{SMA_PRESETS.map((p) => {
|
{SMA_PRESETS.map((p) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user