Update VideoDemo component dimensions and improve layout responsiveness

apps/www/app/(home)/page.tsx

@@ -40,7 +40,7 @@ export default function HomePage() {
 				<SailButton />
 				<StarUsButton />
 			</div>
-			<div className="sm:mt-8 sm:px-2 max-w-5xl mx-auto w-full">
+			<div className="sm:mt-8 sm:px-2 max-w-6xl mx-auto w-full">
 				<VideoDemo />
 			</div>
 		</main>

apps/www/components/page/video-demo.test.tsx

@@ -237,7 +237,6 @@ describe("VideoDemo", () => {
 			"relative",
 			"mb-4",
 			"w-full",
-			"max-w-[800px]",
 			"mx-auto",
 			"sm:px-8",
 		);
@@ -345,7 +344,7 @@ describe("VideoDemo", () => {
 
 		const button = screen.getByRole("button");
 		expect(button).toBeInTheDocument();
-		expect(button).toHaveStyle({ aspectRatio: "800 / 653" });
+		expect(button).toHaveStyle({ aspectRatio: "2048 / 1672" });
 	});
 
 	it("fallback image has sizes attribute and fill prop for responsive loading", () => {
@@ -361,7 +360,7 @@ describe("VideoDemo", () => {
 
 		const img = button.querySelector("img");
 		expect(img).toBeInTheDocument();
-		expect(img).toHaveAttribute("sizes", "(max-width: 768px) 100vw, 800px");
+		expect(img).toHaveAttribute("sizes", "100vw");
 		expect(img).toHaveAttribute("data-fill", "true");
 	});
 });

apps/www/components/page/video-demo.tsx

@@ -5,8 +5,12 @@ import BackgroundVideo from "next-video/background-video";
 import { useState } from "react";
 import demo from "~/videos/demo.mp4";
 
-const WIDTH = 800;
-const HEIGHT = 653;
+// Actual video dimensions
+const WIDTH = 2048;
+const HEIGHT = 1672;
+
+const getAspectRatio = (width: number, height: number) =>
+	`${width} / ${height}`;
 
 export function VideoDemo() {
 	const [videoError, setVideoError] = useState(false);
@@ -22,22 +26,22 @@ export function VideoDemo() {
 	};
 
 	return (
-		<div className="relative mb-4 w-full max-w-[800px] mx-auto sm:px-8">
+		<div className="relative mb-4 w-full mx-auto sm:px-8">
 			{/* Main video container with aspect ratio */}
 			<button
 				type="button"
 				className="relative rounded-lg overflow-hidden border border-fd-border shadow-lg bg-black/5 dark:bg-black/20 cursor-pointer m-0 p-0 w-full shadow-[0_0_20px_rgba(96,165,250,0.6)] dark:shadow-[0_0_100px_rgba(96,165,250,0.2)]"
 				onClick={handleVideoClick}
 				aria-label="Open interactive demo in a new tab"
-				style={{ aspectRatio: `${WIDTH} / ${HEIGHT}` }}
+				style={{ aspectRatio: getAspectRatio(WIDTH, HEIGHT) }}
 			>
 				{videoError ? (
 					<Image
 						src="/assets/demo.gif"
 						alt="ArkEnv Demo"
 						fill
 						className="object-contain"
-						sizes="(max-width: 768px) 100vw, 800px"
+						sizes="100vw"
 					/>
 				) : (
 					<BackgroundVideo

tooling/playwright-www/tests/homepage.test.ts

@@ -143,9 +143,12 @@ test.describe("Homepage", () => {
 		);
 		await expect(videoButton).toBeVisible();
 
+		// Wait a bit for video to be fully loaded to reduce flakiness
+		await page.waitForTimeout(500);
+
 		// Test click opens new tab (we can't easily test the actual navigation in E2E)
 		const [newPage] = await Promise.all([
-			page.context().waitForEvent("page"),
+			page.context().waitForEvent("page", { timeout: 10000 }),
 			videoButton.click(),
 		]);
 

tooling/playwright-www/tests/responsive.test.ts

@@ -169,9 +169,9 @@ test.describe("Responsive Design", () => {
 			expect(boundingBox).not.toBeNull();
 
 			if (boundingBox) {
-				// Video should not exceed its natural maximum width (800px)
-				// Allow a small margin for sub-pixel rendering
-				expect(boundingBox.width).toBeLessThanOrEqual(810);
+				// Video should not exceed max-w-6xl constraint (1280px)
+				// Allow a small margin for padding and sub-pixel rendering
+				expect(boundingBox.width).toBeLessThanOrEqual(1300);
 			}
 		});
 	});