mirror of
https://github.com/bytedance/deer-flow.git
synced 2026-09-21 20:16:18 +00:00
7a985f441c
* fix(frontend): address mobile workspace polish blockers * fix(frontend): prevent mobile landing overflow * fix(frontend): keep landing sections within mobile viewport Section titles used a fixed text-5xl with no word breaking, and the <section> flex items had default min-width:auto, so wider Linux font metrics in CI pushed content past the viewport (scrollWidth 345 > 320). Make titles/subtitles responsive with break-words, constrain section width with min-w-0, and add an overflow-x-clip guard on the page root. * fix(frontend): address review feedback on mobile landing PR - add hamburger Sheet nav below sm: so mobile users keep docs/blog access - switch useIsMobile to useSyncExternalStore to avoid hydration swap flash - memoize artifactContent so it isn't rebuilt on every streamed token - use slot-based key in HeroWordRotate; drop flex-wrap so SuperAgent never orphans at 320px - delete unused word-rotate.tsx dead code - move section gutter to <main> for a uniform mobile padding contract - harden e2e: per-viewport overflow tests, locale-stable artifact selector, focus-ring asserts light vs dark differ --------- Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
32 lines
926 B
TypeScript
32 lines
926 B
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
export function Section({
|
|
className,
|
|
title,
|
|
subtitle,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
title: React.ReactNode;
|
|
subtitle?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<section
|
|
className={cn("mx-auto flex w-full min-w-0 flex-col py-16", className)}
|
|
>
|
|
<header className="flex flex-col items-center justify-between px-4">
|
|
<div className="mb-4 max-w-full bg-linear-to-r from-white via-gray-200 to-gray-400 bg-clip-text text-center text-3xl font-bold break-words text-transparent sm:text-4xl md:text-5xl">
|
|
{title}
|
|
</div>
|
|
{subtitle && (
|
|
<div className="text-muted-foreground max-w-full text-center text-base break-words sm:text-lg md:text-xl">
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
</header>
|
|
<main className="mt-4 w-full min-w-0 px-4">{children}</main>
|
|
</section>
|
|
);
|
|
}
|