chore: design fixes

Author: Rieranthony

apps/web/src/app/(lander-docs)/components/docs/screenshot-frame.tsx

@@ -294,7 +294,7 @@ export function ScreenshotFrame({
 			<figure
 				className={cn(
 					SHARP_RADIUS_CLASSNAME,
-					"relative overflow-hidden border border-dashed px-3 py-3 sm:px-4 sm:py-4 md:px-5 md:py-5"
+					"relative overflow-hidden border border-dashed bg-background-200 px-3 py-3 sm:px-4 sm:py-4 md:px-5 md:py-5 dark:bg-background-400"
 				)}
 				style={{ backgroundColor }}
 			>
@@ -320,13 +320,15 @@ export function ScreenshotFrame({
 					>
 						<div className="absolute inset-0">
 							{activeType === "browser" ? (
-								<BrowserSlide
-									item={activeItem}
-									mediaAspectRatio={activeMediaAspectRatio}
-									onMediaLoad={(aspectRatio) =>
-										handleMediaLoad(activeItem.src, aspectRatio)
-									}
-								/>
+								<div className="dark">
+									<BrowserSlide
+										item={activeItem}
+										mediaAspectRatio={activeMediaAspectRatio}
+										onMediaLoad={(aspectRatio) =>
+											handleMediaLoad(activeItem.src, aspectRatio)
+										}
+									/>
+								</div>
 							) : (
 								<WidgetSlide item={activeItem} />
 							)}

apps/web/src/components/showcase/browser-shell.tsx

@@ -24,7 +24,7 @@ export function BrowserShell({
 			)}
 			data-slot="browser-shell"
 		>
-			<div className="flex h-full w-full flex-col overflow-hidden bg-black dark:bg-background-100">
+			<div className="flex h-full w-full flex-col overflow-hidden bg-background dark:bg-background-100">
 				<div className="flex items-center justify-between gap-2 border-primary/5 border-b px-4 py-1">
 					<div
 						className="flex w-20 gap-2"