diff --git a/src/components/messageStream/CollapsibleText.tsx b/src/components/messageStream/CollapsibleText.tsx index b0320a4..7bc743b 100644 --- a/src/components/messageStream/CollapsibleText.tsx +++ b/src/components/messageStream/CollapsibleText.tsx @@ -28,7 +28,7 @@ export function CollapsibleText({ children, className = "", wrapperClassName = "", - collapsedLines = 8, + collapsedLines = 25, }: { children: ReactNode; /** Typography classes applied to the text container. */ @@ -110,7 +110,7 @@ export function CollapsibleText({ type="button" onClick={() => setExpanded((v) => !v)} aria-expanded={expanded} - className="group mt-1.5 inline-flex h-8 items-center gap-1 text-[13px] font-medium text-ark-gold transition-colors duration-200 hover:text-ark-gold2" + className="group mt-1 inline-flex items-center gap-1 text-[13px] font-medium leading-5 text-ark-gold transition-colors duration-200 hover:text-ark-gold2" > {expanded ? t("showLess") : t("showMore")} - {formatDateTime(post.publishedAt, lang)} + {formatDateTime(post.publishedAt)} diff --git a/src/components/messageStream/utils/formatTime.ts b/src/components/messageStream/utils/formatTime.ts index 4e07164..3dacecc 100644 --- a/src/components/messageStream/utils/formatTime.ts +++ b/src/components/messageStream/utils/formatTime.ts @@ -1,34 +1,17 @@ -function localeFor(lang: string): string { - const locales: Record = { - zh: "zh-CN", - en: "en-US", - ja: "ja-JP", - ko: "ko-KR", - vi: "vi-VN", - id: "id-ID", - ms: "ms-MY", - }; - return locales[lang] ?? "en-US"; +function pad2(n: number): string { + return String(n).padStart(2, "0"); } -function formatDate(iso: string, lang: string): string { +function formatDate(iso: string): string { const d = new Date(iso); - return new Intl.DateTimeFormat(localeFor(lang), { - year: "numeric", - month: lang === "en" ? "short" : "numeric", - day: "numeric", - }).format(d); + return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`; } -export function formatTime(iso: string, lang: string): string { +export function formatTime(iso: string): string { const d = new Date(iso); - return new Intl.DateTimeFormat(localeFor(lang), { - hour: "numeric", - minute: "2-digit", - hour12: lang === "en", - }).format(d); + return `${pad2(d.getHours())}:${pad2(d.getMinutes())}`; } -export function formatDateTime(iso: string, lang: string): string { - return `${formatDate(iso, lang)} ${formatTime(iso, lang)}`; +export function formatDateTime(iso: string): string { + return `${formatDate(iso)} ${formatTime(iso)}`; } diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 5019140..f6a263b 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -137,10 +137,15 @@ export function Home() { for (let index = 0; index < figmaOrderedCategories.length; index += 9) { categoryPages.push(figmaOrderedCategories.slice(index, index + 9)); } - const activeCategoryCount = categoryPages[activeCategoryPage]?.length ?? 0; - const activeCategoryRows = Math.ceil(activeCategoryCount / 3); + // Use the tallest page so the carousel height doesn't shrink between + // pages — otherwise the section below jumps up when swiping to a page + // with fewer categories. + const maxCategoryRows = categoryPages.reduce( + (max, page) => Math.max(max, Math.ceil(page.length / 3)), + 0, + ); const mobileCategoryHeight = - activeCategoryRows * 88 + Math.max(0, activeCategoryRows - 1) * 8; + maxCategoryRows * 88 + Math.max(0, maxCategoryRows - 1) * 8; useEffect(() => { const row = categoryRowRef.current;