polish

src/shared/notes/contents/kind1.tsx

@@ -17,7 +17,7 @@ export function Kind1({
 				{content.parsed}
 			</div>
 			{Array.isArray(content.images) && content.images.length ? (
-				<ImagePreview urls={content.images} />
+				<ImagePreview urls={content.images} truncate={truncate} />
 			) : (
 				<></>
 			)}

src/shared/notes/mentions/note.tsx

@@ -57,7 +57,7 @@ export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
 										Lume isn't fully support this kind in newsfeed
 									</p>
 								</div>
-								<div className="markdown">
+								<div className="select-text whitespace-pre-line	break-words text-base text-zinc-100">
 									<p>{data.content}</p>
 								</div>
 							</div>

src/shared/notes/note.tsx

@@ -71,7 +71,7 @@ export function Note({ event, block }: Note) {
 						time={event.created_at}
 						repost={isRepost}
 					/>
-					<div className="z-10 relative -mt-6 pl-[49px]">
+					<div className="relative -mt-6 pl-[49px]">
 						{renderContent}
 						{!isRepost && (
 							<NoteMetadata

src/shared/notes/preview/image.tsx

@@ -1,6 +1,9 @@
 import { Image } from "@shared/image";
 
-export function ImagePreview({ urls }: { urls: string[] }) {
+export function ImagePreview({
+	urls,
+	truncate,
+}: { urls: string[]; truncate?: boolean }) {
 	return (
 		<div className="mt-3 max-w-[420px] overflow-hidden">
 			<div className="flex flex-col gap-2">
@@ -10,7 +13,9 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 							src={url}
 							fallback="https://void.cat/d/XTmrMkpid8DGLjv1AzdvcW"
 							alt="image"
-							className="h-auto w-full border border-zinc-800/50 rounded-lg object-cover"
+							className={`${
+								truncate ? "h-auto max-h-[300px]" : "h-auto"
+							} w-full border border-zinc-800/50 rounded-lg object-cover`}
 						/>
 					</div>
 				))}