refactor channel

src/shared/notes/preview/image.tsx

@@ -2,7 +2,7 @@ import { Image } from "@shared/image";
 
 export function ImagePreview({ urls }: { urls: string[] }) {
 	return (
-		<div className="mt-3 overflow-hidden">
+		<div className="mt-3 max-w-[420px] overflow-hidden">
 			<div className="flex flex-col gap-2">
 				{urls.map((url) => (
 					<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">

src/shared/notes/preview/link.tsx

@@ -6,7 +6,7 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 	const { data, error, isLoading } = useOpenGraph(urls[0]);
 
 	return (
-		<div className="mt-3 overflow-hidden rounded-lg bg-zinc-800">
+		<div className="mt-3 max-w-[420px] overflow-hidden rounded-lg bg-zinc-800">
 			{error && <p>failed to load</p>}
 			{isLoading || !data ? (
 				<div className="flex flex-col">

src/shared/notes/preview/video.tsx

@@ -5,7 +5,7 @@ export function VideoPreview({ urls }: { urls: string[] }) {
 		<div
 			onClick={(e) => e.stopPropagation()}
 			onKeyDown={(e) => e.stopPropagation()}
-			className="relative mt-2 flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
+			className="relative mt-3 max-w-[420px] flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
 		>
 			<MediaPlayer src={urls[0]} poster="" controls>
 				<MediaOutlet />