diff --git a/apps/web/e2e/full-sweep-learner-home.spec.ts b/apps/web/e2e/full-sweep-learner-home.spec.ts index 86c27eb..0065d5a 100644 --- a/apps/web/e2e/full-sweep-learner-home.spec.ts +++ b/apps/web/e2e/full-sweep-learner-home.spec.ts @@ -513,10 +513,46 @@ test.describe("full-sweep learner home", () => { await expect(coachCard.getByLabel("코칭 힌트")).toContainText( "마지막 반응 먼저 반영", ); - await coachCard.getByRole("button", { name: "이어하기" }).click(); + const primaryAction = page.locator("[data-learner-primary-action]"); + await expect(primaryAction).toHaveAccessibleName("이어하기"); + await primaryAction.click(); await expect(page).toHaveURL(new RegExp(`/learn/session/${ACT_ID}$`)); }); + test("naturalizes persisted privacy placeholders in the spotlight recap", async ({ + page, + }) => { + await signInAsLearner(page); + await installLearnerHomeFixtures(page, { detail: false }); + await page.route(new RegExp(`/api/sessions/${ACT_ID}$`), (route) => + route.fulfill( + jsonRoute({ + ...DETAIL_BODY, + turns: [ + { + ...DETAIL_BODY.turns[0], + text: "[NAME]에게 [PHONE]으로 연락해 볼까요?", + }, + { + ...DETAIL_BODY.turns[1], + text: "뭘… 할 수 있게 [NAME]는 건지 잘 [NAME]는데요. [ORG]에서 오라고 했어요.", + }, + ], + }), + ), + ); + + await page.goto("/learn"); + + const recap = page.getByLabel("마지막 세션 리캡"); + await expect(recap).toContainText("할 수 있게 되는 건지 잘 모르겠는데요"); + await expect(recap).toContainText("소속 기관에서 오라고 했어요"); + await expect(recap).toContainText("익명 내담자에게 연락처로 연락해 볼까요"); + for (const token of ["[NAME]", "[ORG]", "[PHONE]"]) { + await expect(recap).not.toContainText(token); + } + }); + // checklist: learner-home-dash-recommend-card, learner-home-dash-recent-feedback, // learner-home-dash-review-queue test("prioritizes review in the recommend card, recent feedback, and review queue", async ({ @@ -540,7 +576,9 @@ test.describe("full-sweep learner home", () => { const feedback = page.locator(".lh-dashboard-feedback"); await expect(feedback.locator(".lh-panel__badge")).toHaveText("1건"); const feedbackRow = feedback.locator(".lh-feedback-mini__row"); - await expect(feedbackRow).toContainText("P1 · 정리 · 62점"); + const feedbackMeta = feedbackRow.locator("b > span"); + await expect(feedbackMeta.nth(0)).toHaveText("P1 · 정리"); + await expect(feedbackMeta.nth(1)).toHaveText("62점"); await expect(feedbackRow).toContainText( "감정 반영은 좋았지만 탐색 질문 전에 요약이 필요합니다.", ); @@ -831,9 +869,16 @@ test.describe("full-sweep learner home", () => { await expect(rows).toHaveCount(2); // 회기 수 내림차순 정렬 — P1(3회)이 먼저 온다. await expect(rows.nth(0)).toContainText("P1"); - await expect(rows.nth(0)).toContainText( - "3회 · 1회 진행 · 1회 리뷰 · 평균 4턴", + const firstMeta = rows.nth(0).locator(".lh-persona-progress__meta"); + await expect(firstMeta.locator(":scope > span").nth(0)).toHaveText( + "3회 · 평균 4턴", ); + await expect(firstMeta.locator(":scope > span").nth(1)).toHaveText( + "진행 1 · 리뷰 1", + ); + await expect( + rows.nth(0).locator(".lh-persona-progress__latest"), + ).toHaveText("진행 중 · 탐색"); await expect(rows.nth(1)).toContainText("P2"); // 행 클릭 시 해당 페르소나가 선택된 채 연습 화면으로 진입. diff --git a/apps/web/e2e/full-sweep-session.spec.ts b/apps/web/e2e/full-sweep-session.spec.ts index 48e078d..5e8486b 100644 --- a/apps/web/e2e/full-sweep-session.spec.ts +++ b/apps/web/e2e/full-sweep-session.spec.ts @@ -691,6 +691,69 @@ test.describe("full sweep — counseling session", () => { await expect(transcript).toContainText("소속 기관에서 오라고 했어요"); }); + test("caps an overdue active session honestly and preserves 44px mobile controls", async ({ + page, + }) => { + await routeSessionFixtureApi(page, { + durationLimitSeconds: 3600, + detailOverrides: { + started_at: new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString(), + }, + }); + + await page.goto(`/learn/session/${fixtureSessionId}`); + await expect(page.locator("#sx-end-dialog-title")).toHaveText( + "회기 시간이 끝났어요", + ); + await expect(page.locator(".sx-sessionbar__meta")).toContainText("시간 만료"); + await expect(page.locator("span.sr-only[aria-live='polite']")).toHaveText( + "회기 시간 만료", + ); + + for (const viewport of [ + { width: 390, height: 844 }, + { width: 320, height: 568 }, + ]) { + await page.setViewportSize(viewport); + await page.evaluate(() => new Promise(requestAnimationFrame)); + const targetMetrics = await page + .locator(".sx-page--active button:visible, .sx-page--active textarea:visible") + .evaluateAll((elements) => + elements.map((element) => { + const rect = element.getBoundingClientRect(); + return { + label: + element.getAttribute("aria-label") || + element.textContent?.replace(/\s+/g, " ").trim() || + element.tagName, + width: rect.width, + height: rect.height, + }; + }), + ); + expect(targetMetrics.length, `${viewport.width} visible controls`).toBeGreaterThan(0); + for (const target of targetMetrics) { + expect( + target.width, + `${viewport.width} ${target.label} touch width`, + ).toBeGreaterThanOrEqual(44); + expect( + target.height, + `${viewport.width} ${target.label} touch height`, + ).toBeGreaterThanOrEqual(44); + } + const layout = await page.evaluate(() => ({ + viewportWidth: window.innerWidth, + documentWidth: document.documentElement.scrollWidth, + bodyText: document.body.innerText, + })); + expect(layout.documentWidth, `${viewport.width} horizontal overflow`).toBeLessThanOrEqual( + layout.viewportWidth, + ); + expect(layout.bodyText).not.toMatch(/\b\d{4,}:\d{2}\b/); + } + }); + // checklist: session-transcript-autoscroll test("releases autoscroll when scrolling up, jumps back with the latest button, and follows new turns", async ({ page, @@ -715,12 +778,27 @@ test.describe("full sweep — counseling session", () => { const jumpButton = page.getByRole("button", { name: "최신으로" }); await expect(jumpButton).toHaveCount(0); + // 최신 발화를 따라가는 동안 scrollport가 모바일 레이아웃으로 재배치돼도 + // ResizeObserver가 새 하단에 붙이고 layout scroll을 사용자 이탈로 오인하지 않는다. + await page.setViewportSize({ width: 390, height: 844 }); + await expect + .poll(() => + scroller.evaluate((el) => el.scrollHeight - el.scrollTop - el.clientHeight), + ) + .toBeLessThan(24); + await expect(jumpButton).toHaveCount(0); + // 위로 스크롤 → 자동 따라가기 해제 + '최신으로' 복귀 버튼 노출. - await scroller.evaluate((el) => { - el.scrollTop = 0; - el.dispatchEvent(new Event("scroll")); - }); + await scroller.hover(); + await page.mouse.wheel(0, -10_000); await expect(jumpButton).toBeVisible(); + await page.setViewportSize({ width: 320, height: 568 }); + await expect(jumpButton).toBeVisible(); + await expect + .poll(() => + scroller.evaluate((el) => el.scrollHeight - el.scrollTop - el.clientHeight), + ) + .toBeGreaterThanOrEqual(24); await jumpButton.click(); await expect(jumpButton).toHaveCount(0); diff --git a/apps/web/e2e/self-directed-learning-loop.spec.ts b/apps/web/e2e/self-directed-learning-loop.spec.ts index f70e6a8..f5adccd 100644 --- a/apps/web/e2e/self-directed-learning-loop.spec.ts +++ b/apps/web/e2e/self-directed-learning-loop.spec.ts @@ -806,9 +806,14 @@ async function expectMobileActiveVisualIntegrity(page: Page) { const avatar = visibleRect(".sx-orb-wrap"); const client = visibleRect(".sx-stage__client"); const now = visibleRect(".sx-stage__now"); + const sessionbar = visibleRect(".sx-sessionbar"); + const timebar = visibleRect(".sx-timebar"); + const mobileContext = visibleRect(".sx-mobile-context"); const transcript = visibleRect(".sx-transcript"); + const transcriptHead = visibleRect(".sx-transcript__head"); const scroll = visibleRect(".sx-transcript__scroll"); const compose = visibleRect(".sx-compose"); + const controlbar = visibleRect(".sx-controlbar"); const replies = Array.from( document.querySelectorAll(".sx-transcript__scroll .sx-utt"), ).filter((element) => getComputedStyle(element).display !== "none"); @@ -820,6 +825,44 @@ async function expectMobileActiveVisualIntegrity(page: Page) { return { viewport: `${innerWidth}x${innerHeight}`, + compactStage: innerWidth <= 420 && innerHeight <= 620, + avatarHidden: avatar == null, + geometry: { + scroll: scroll + ? { top: scroll.top, bottom: scroll.bottom, height: scroll.height } + : null, + scrollClientHeight: + document.querySelector(".sx-transcript__scroll")?.clientHeight ?? null, + scrollHeight: + document.querySelector(".sx-transcript__scroll")?.scrollHeight ?? null, + scrollTop: + document.querySelector(".sx-transcript__scroll")?.scrollTop ?? null, + latestReply: latestReply + ? { top: latestReply.top, bottom: latestReply.bottom, height: latestReply.height } + : null, + sessionbar: sessionbar + ? { top: sessionbar.top, bottom: sessionbar.bottom, height: sessionbar.height } + : null, + timebar: timebar + ? { top: timebar.top, bottom: timebar.bottom, height: timebar.height } + : null, + mobileContext: mobileContext + ? { top: mobileContext.top, bottom: mobileContext.bottom, height: mobileContext.height } + : null, + transcript: transcript + ? { top: transcript.top, bottom: transcript.bottom, height: transcript.height } + : null, + transcriptHead: transcriptHead + ? { top: transcriptHead.top, bottom: transcriptHead.bottom, height: transcriptHead.height } + : null, + compose: compose + ? { top: compose.top, bottom: compose.bottom, height: compose.height } + : null, + stage: stage ? { top: stage.top, bottom: stage.bottom, height: stage.height } : null, + controlbar: controlbar + ? { top: controlbar.top, bottom: controlbar.bottom, height: controlbar.height } + : null, + }, overlaps, stageContainsAvatar: Boolean(stage && avatar && contained(stage, avatar)), stageContainsClient: Boolean(stage && client && contained(stage, client)), @@ -836,13 +879,18 @@ async function expectMobileActiveVisualIntegrity(page: Page) { }; }); - expect(result.overlaps, result.viewport).toEqual([]); - expect(result.stageContainsAvatar, result.viewport).toBe(true); - expect(result.stageContainsClient, result.viewport).toBe(true); - expect(result.statusHidden, result.viewport).toBe(true); - expect(result.transcriptContained, result.viewport).toBe(true); - expect(result.composeContained, result.viewport).toBe(true); - expect(result.latestReplyVisible, result.viewport).toBe(true); + const diagnostic = `${result.viewport} ${JSON.stringify(result.geometry)}`; + expect(result.overlaps, diagnostic).toEqual([]); + if (result.compactStage) { + expect(result.avatarHidden, diagnostic).toBe(true); + } else { + expect(result.stageContainsAvatar, diagnostic).toBe(true); + } + expect(result.stageContainsClient, diagnostic).toBe(true); + expect(result.statusHidden, diagnostic).toBe(true); + expect(result.transcriptContained, diagnostic).toBe(true); + expect(result.composeContained, diagnostic).toBe(true); + expect(result.latestReplyVisible, diagnostic).toBe(true); } async function capture(page: Page, projectName: string, stage: string) { diff --git a/apps/web/src/lib/piiDisplay.ts b/apps/web/src/lib/piiDisplay.ts index 47b1f32..1d40d46 100644 --- a/apps/web/src/lib/piiDisplay.ts +++ b/apps/web/src/lib/piiDisplay.ts @@ -11,6 +11,35 @@ const DISPLAY_PLACEHOLDERS: Record = { "[ADDRESS]": "주소", }; +function hasHangulBatchim(value: string) { + for (let index = value.length - 1; index >= 0; index -= 1) { + const code = value.charCodeAt(index); + if (code >= 0xac00 && code <= 0xd7a3) return (code - 0xac00) % 28 !== 0; + } + return false; +} + +function replacePlaceholderWithNaturalParticle( + text: string, + placeholder: string, + label: string, +) { + const batchim = hasHangulBatchim(label); + let next = text; + for (const [variants, particle] of [ + [["으로", "로"], batchim ? "으로" : "로"], + [["은", "는"], batchim ? "은" : "는"], + [["이", "가"], batchim ? "이" : "가"], + [["을", "를"], batchim ? "을" : "를"], + [["과", "와"], batchim ? "과" : "와"], + ] as const) { + for (const variant of variants) { + next = next.split(`${placeholder}${variant}`).join(`${label}${particle}`); + } + } + return next.split(placeholder).join(label); +} + /** * 저장/API의 privacy-proof 토큰은 유지하고, 사람이 읽는 일반 대화 표면에서만 * 토큰을 안전한 설명으로 낮춘다. 근거 인용·내보내기에는 사용하지 않는다. @@ -24,7 +53,7 @@ export function displayPiiSafeText(text: string) { "되는 건지 잘 모르겠는데요", ); for (const [placeholder, label] of Object.entries(DISPLAY_PLACEHOLDERS)) { - next = next.split(placeholder).join(label); + next = replacePlaceholderWithNaturalParticle(next, placeholder, label); } return next; } diff --git a/apps/web/src/pages/LearnerHome.tsx b/apps/web/src/pages/LearnerHome.tsx index 13dffd7..ad5fdad 100644 --- a/apps/web/src/pages/LearnerHome.tsx +++ b/apps/web/src/pages/LearnerHome.tsx @@ -22,6 +22,7 @@ import { type PersonaSummary, type SessionDetailResponse, } from "../lib/api"; +import { displayPiiSafeText } from "../lib/piiDisplay"; import { DIFFICULTY_LABEL, isUsablePersona, @@ -683,8 +684,14 @@ export default function LearnerHome({ view = "dashboard" }: LearnerHomeProps) { spotlightPersona, ); const spotlightAffectLabel = expressionLabelFor(spotlightAffect); - const lastClientLine = lastTurnText(effectiveRecapDetail, "client"); - const lastLearnerLine = lastTurnText(effectiveRecapDetail, "learner"); + const rawLastClientLine = lastTurnText(effectiveRecapDetail, "client"); + const rawLastLearnerLine = lastTurnText(effectiveRecapDetail, "learner"); + const lastClientLine = rawLastClientLine + ? displayPiiSafeText(rawLastClientLine) + : null; + const lastLearnerLine = rawLastLearnerLine + ? displayPiiSafeText(rawLastLearnerLine) + : null; const reviewQueue = sortedSessions .filter((session) => session.review_ready) .slice(0, 3); @@ -1358,6 +1365,19 @@ export default function LearnerHome({ view = "dashboard" }: LearnerHomeProps) { ? "새 회기를 시작하기 전에 이미 끝난 대화의 반응과 대안 발화를 확인하세요." : "다음 회기에서는 감정 반영 뒤 무엇을 더 물을지 한 문장으로 정하고 들어갑니다."}

+ diff --git a/apps/web/src/pages/Session.tsx b/apps/web/src/pages/Session.tsx index 5943937..5132fd0 100644 --- a/apps/web/src/pages/Session.tsx +++ b/apps/web/src/pages/Session.tsx @@ -500,6 +500,9 @@ export default function Session() { // ── 자동 스크롤 ── const scrollRef = useRef(null); const [autoScroll, setAutoScroll] = useState(true); + const autoScrollRef = useRef(true); + const userScrollIntentRef = useRef(false); + const userScrollIntentTimerRef = useRef(null); const fadeTimerRef = useRef(null); const voiceSocketRef = useRef(null); @@ -652,18 +655,38 @@ export default function Session() { // ── 경과 타이머 진행(일시정지 시 멈춤) ── useEffect(() => { - if (!started || paused) return; + if (!started || paused || timeUp) return; const t = window.setInterval(() => setElapsed((s) => s + 1), 1000); return () => window.clearInterval(t); - }, [started, paused]); + }, [started, paused, timeUp]); // ── 자막 자동 스크롤(아래로) ── + const setTranscriptFollowMode = useCallback((following: boolean) => { + autoScrollRef.current = following; + setAutoScroll(following); + }, []); + useEffect(() => { if (!autoScroll) return; const el = scrollRef.current; if (el) el.scrollTop = el.scrollHeight; }, [utterances, clientReplyPending, turnError, autoScroll]); + // 모바일 조작면·뷰포트 변화로 축어록 scrollport 높이가 바뀌어도, 사용자가 + // 최신 발화를 따라가던 중이었다면 같은 paint 전에 새 하단으로 재동기화한다. + // 사용자가 위로 읽고 있을 때는 autoScrollRef가 false라 절대 위치를 바꾸지 않는다. + useEffect(() => { + if (!started || typeof ResizeObserver === "undefined") return; + const el = scrollRef.current; + if (!el) return; + + const observer = new ResizeObserver(() => { + if (autoScrollRef.current) el.scrollTop = el.scrollHeight; + }); + observer.observe(el); + return () => observer.disconnect(); + }, [started]); + // ── 라이브 신호 6초 페이드(§5.5) ── useEffect(() => { if (!liveSignal) return; @@ -675,18 +698,40 @@ export default function Session() { }; }, [liveSignal]); - // 사용자가 위로 스크롤하면 자동스크롤 해제 + const markUserScrollIntent = useCallback(() => { + userScrollIntentRef.current = true; + if (userScrollIntentTimerRef.current) { + window.clearTimeout(userScrollIntentTimerRef.current); + } + userScrollIntentTimerRef.current = window.setTimeout(() => { + userScrollIntentRef.current = false; + userScrollIntentTimerRef.current = null; + }, 500); + }, []); + + useEffect( + () => () => { + if (userScrollIntentTimerRef.current) { + window.clearTimeout(userScrollIntentTimerRef.current); + } + }, + [], + ); + + // wheel/touch로 사용자가 직접 이동한 경우에만 자동 따라가기를 바꾼다. + // 레이아웃 reflow가 발생시키는 scroll 이벤트는 사용자 이탈로 오인하지 않는다. const onScroll = useCallback(() => { + if (!userScrollIntentRef.current) return; const el = scrollRef.current; if (!el) return; const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 24; - setAutoScroll(atBottom); - }, []); + setTranscriptFollowMode(atBottom); + }, [setTranscriptFollowMode]); const jumpToLatest = () => { const el = scrollRef.current; + setTranscriptFollowMode(true); if (el) el.scrollTop = el.scrollHeight; - setAutoScroll(true); }; // 라이브 신호 push + 시퀀스 누적 (최근 5개 유지) @@ -1007,7 +1052,16 @@ export default function Session() { at: secondsBetween(detail.started_at, turn.created_at), })), ); - setElapsed(elapsedFromSession(detail)); + const restoredElapsed = elapsedFromSession(detail); + const restoredDurationLimit = + detail.duration_limit_seconds && detail.duration_limit_seconds > 0 + ? detail.duration_limit_seconds + : 60 * 60; + const restoredTimeUp = !ended && restoredElapsed >= restoredDurationLimit; + // 오래 열린 active 회기를 벽시계 시간만큼 계속 증가시키면 수만 분짜리 + // 타이머가 된다. 운영 상태는 보존하되 화면 타이머는 계약된 회기 한도에서 + // 멈추고 아래 time-up 상태가 "시간 만료"를 정직하게 설명한다. + setElapsed(ended ? restoredElapsed : Math.min(restoredElapsed, restoredDurationLimit)); setGoalStages(detail.goal_stages ?? []); setProgress(detail.progress ?? null); if (detail.duration_limit_seconds) setDurationLimitSeconds(detail.duration_limit_seconds); @@ -1017,7 +1071,7 @@ export default function Session() { timeWarningShownRef.current = false; timeUpShownRef.current = ended; goalNudgeShownRef.current = false; - setTimeUp(false); + setTimeUp(restoredTimeUp); setStarted(true); setPaused(ended); setSafety(null); @@ -2315,7 +2369,7 @@ export default function Session() { !paused && !sending && !sessionEnded; - const elapsedLabel = formatTimecode(elapsed); + const elapsedLabel = timeUp && !sessionEnded ? "시간 만료" : formatTimecode(elapsed); const remainingLabel = formatTimecode(remainingSeconds); const limitMinutesLabel = Math.round(sessionLimitSeconds / 60); const warningMinutesLabel = Math.max(1, Math.round(sessionWarningSeconds / 60)); @@ -3098,6 +3152,10 @@ export default function Session() { className="sx-transcript__scroll" ref={scrollRef} onScroll={onScroll} + onWheel={markUserScrollIntent} + onPointerDown={markUserScrollIntent} + onTouchStart={markUserScrollIntent} + onTouchMove={markUserScrollIntent} role="log" aria-label="실시간 상담 축어록" aria-live="polite" @@ -4065,7 +4123,7 @@ export default function Session() { {/* 경과 시간(접근성 — 보조 표기. 화면 우상단 톱바는 셸 소관) */} - 경과 {formatElapsed(elapsed)} + {timeUp && !sessionEnded ? "회기 시간 만료" : `경과 ${formatElapsed(elapsed)}`} )} diff --git a/apps/web/src/pages/session/session.css b/apps/web/src/pages/session/session.css index 34bbad4..deffd7f 100644 --- a/apps/web/src/pages/session/session.css +++ b/apps/web/src/pages/session/session.css @@ -4858,6 +4858,49 @@ } } +/* 학생용 active 회기의 모바일 조작면은 시각 압축보다 44px 터치 계약을 우선한다. + 위의 저높이/좁은폭 보정이 28~40px까지 줄이던 실제 클릭 상자를 여기서 복구한다. */ +@media (max-width: 880px) { + .sx-page--active button, + .sx-page--active textarea { + min-width: 44px !important; + min-height: 44px !important; + } + + .sx-page--active .sx-sessionbar .sx-sessionbar__back, + .sx-page--active .sx-sessionbar__actions button:not(.sx-sessionbar__review) { + width: 44px !important; + min-width: 44px !important; + } +} + +/* 390px급 일반 높이 폰: 44px 입력 조작면을 유지하면서도 최신 발화 한 행 + (현재 회귀 fixture 82.1px)이 축어록 안에 온전히 들어오도록 카드 내부의 비스크롤 + 여백을 압축하고 scrollport에 83px을 보장한다. 620px 이하 저높이 규칙과는 분리한다. */ +@media (max-width: 420px) and (min-height: 621px) { + .sx-page--active .sx-transcript { + padding-block: 6px; + } + + .sx-page--active .sx-transcript__head { + margin-bottom: 4px; + } + + .sx-page--active .sx-transcript__scroll { + min-height: 83px; + } + + .sx-page--active .sx-compose { + margin-top: 5px; + padding-top: 5px; + } + + .sx-page--active .sx-compose textarea, + .sx-page--active .sx-compose .vg-btn { + height: 44px; + } +} + /* 320×568 같은 저높이 폰에서는 mid 자기점검의 설명/버튼 줄바꿈만으로 축어록 행이 사라진다. G1 상태는 그대로 두고 collapsed 표현만 한 줄로 압축한다. */ @media (max-width: 420px) and (max-height: 620px) { @@ -4906,10 +4949,53 @@ .sx-page--active .sx-mobile-context__brief { display: none; } - /* 110px 고정 최소 높이는 입력창을 카드 바깥으로 밀어냈다. 중앙 그리드가 - 남은 높이를 배분하게 하되, 스크롤과 입력창 모두 transcript 안에 둔다. */ + + /* 320×568에서는 최신 발화 한 행과 44px 입력 조작면을 최우선으로 둔다. + stage는 이름+현재 내담자 문장만 남기는 20px strip으로 바꿔 63px을 축어록에 + 돌려준다. 아바타·orb·상태/타이머는 모바일 요약과 축어록의 중복 정보다. */ + .sx-page--active .sx-col-center { + grid-template-rows: 20px minmax(0, 1fr); + gap: 4px; + } + .sx-page--active .sx-stage { + grid-template-columns: minmax(0, 1fr); + grid-template-rows: minmax(0, 1fr); + padding: 2px 6px; + column-gap: 0; + row-gap: 0; + } + .sx-page--active .sx-stage::before, + .sx-page--active .sx-stage__top, + .sx-page--active .sx-orb-wrap, + .sx-page--active .sx-stage__now { + display: none; + } + .sx-page--active .sx-stage__client { + grid-column: 1; + grid-row: 1; + display: flex; + align-items: center; + gap: 6px; + overflow: hidden; + } + .sx-page--active .sx-stage__client-kicker { + flex: none; + font-size: 11px; + line-height: 1; + } + .sx-page--active .sx-stage__client p { + min-width: 0; + display: block; + overflow: hidden; + font-size: 11px; + line-height: 1.1; + text-overflow: ellipsis; + white-space: nowrap; + } + + /* 위 compact stage가 만든 높이를 최신 발화 한 행의 scrollport에 고정한다. */ .sx-page--active .sx-transcript__scroll { - min-height: 0; + min-height: 83px; } }