From d0b1353bdf91e19a3c8b4fe7305ddca51dc9a4c1 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Tue, 6 Jun 2023 08:26:10 +0700
Subject: [PATCH] fix note preview

---
 src/app/note/components/preview/image.tsx | 2 +-
 src/app/note/components/preview/link.tsx  | 7 ++++++-
 src/renderer/index.css                    | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/note/components/preview/image.tsx b/src/app/note/components/preview/image.tsx
index b03bb8dc..706a213e 100644
--- a/src/app/note/components/preview/image.tsx
+++ b/src/app/note/components/preview/image.tsx
@@ -5,7 +5,7 @@ export function ImagePreview({ urls }: { urls: string[] }) {
 		<div className="mt-3 overflow-hidden">
 			<div className="flex flex-col gap-2">
 				{urls.map((url) => (
-					<div key={url} className="mr-2 min-w-0 grow-0 shrink-0 basis-full">
+					<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">
 						<Image
 							src={url}
 							alt="image"
diff --git a/src/app/note/components/preview/link.tsx b/src/app/note/components/preview/link.tsx
index e5342830..e7b9e0db 100644
--- a/src/app/note/components/preview/link.tsx
+++ b/src/app/note/components/preview/link.tsx
@@ -11,7 +11,12 @@ export function LinkPreview({ urls }: { urls: string[] }) {
 			{isLoading && !data ? (
 				<p>Loading...</p>
 			) : (
-				<a href={urls[0]} className="flex flex-col">
+				<a
+					className="flex flex-col"
+					href={urls[0]}
+					target="_blank"
+					rel="noreferrer"
+				>
 					<Image
 						src={data["og:image"]}
 						alt={urls[0]}
diff --git a/src/renderer/index.css b/src/renderer/index.css
index f32f5bbb..13ee5c20 100644
--- a/src/renderer/index.css
+++ b/src/renderer/index.css
@@ -15,7 +15,7 @@ button {
 }
 
 .markdown {
-  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-blockquote:m-0 prose-hr:mx-0 prose-hr:my-2;
+  @apply prose prose-zinc max-w-none select-text break-words dark:prose-invert prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:leading-tight prose-a:text-fuchsia-500 hover:prose-a:text-fuchsia-600 prose-ol:mb-1 prose-ul:mb-1 prose-li:leading-tight prose-blockquote:m-0 prose-ol:m-0 prose-hr:mx-0 prose-hr:my-2;
 }
 
 /* For Webkit-based browsers (Chrome, Safari and Opera) */