minor design fixes

src/components/note/content/index.tsx

@@ -3,7 +3,7 @@ import NotePreview from '@components/note/content/preview';
 import { UserExtend } from '@components/user/extend';
 
 import dynamic from 'next/dynamic';
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
 const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
   ssr: false,
@@ -11,17 +11,24 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
 });
 
 export const Content = memo(function Content({ data }: { data: any }) {
+  const content = useMemo(
+    () =>
+      // remove all image urls
+      data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp)((\?.*)$|$))/i, ''),
+    [data.content]
+  );
+
   return (
     <div className="relative z-10 flex flex-col">
       <UserExtend pubkey={data.pubkey} time={data.created_at} />
-      <div className="-mt-4 pl-[60px]">
+      <div className="-mt-5 pl-[52px]">
         <div className="flex flex-col gap-6">
           <div className="flex flex-col">
             <div>
               <MarkdownPreview
-                source={data.content}
+                source={content}
                 className={
-                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
+                  'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
                 }
                 linkTarget="_blank"
                 disallowedElements={[

src/components/note/placeholder.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 export const Placeholder = memo(function Placeholder() {
   return (
     <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
-      <div className="flex items-start gap-4">
+      <div className="flex items-start gap-2">
         <div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
         <div className="flex w-full flex-1 items-start justify-between">
           <div className="flex w-full items-center justify-between">
@@ -16,7 +16,7 @@ export const Placeholder = memo(function Placeholder() {
           </div>
         </div>
       </div>
-      <div className="-mt-4 pl-[60px]">
+      <div className="-mt-5 pl-[52px]">
         <div className="flex flex-col gap-6">
           <div className="h-16 w-full rounded bg-zinc-700" />
           <div className="flex items-center gap-8">

src/components/note/preview/image.tsx

@@ -5,7 +5,7 @@ export const ImagePreview = memo(function ImagePreview({ data }: { data: any })
   return (
     <div className="relative mt-2 flex flex-col overflow-hidden">
       {data.map((image: string, index: number) => (
-        <div key={index} className={`relative h-full w-full rounded-lg ${index == 1 ? 'mt-2' : ''}`}>
+        <div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index == 1 ? 'mt-2' : ''}`}>
           <Image
             placeholder="blur"
             blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="

src/components/note/preview/video.tsx

@@ -4,7 +4,14 @@ import ReactPlayer from 'react-player/lazy';
 export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
   return (
     <div className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
-      <ReactPlayer url={data} controls={true} volume={0} className="aspect-video w-full" width="100%" height="100%" />
+      <ReactPlayer
+        url={data}
+        controls={true}
+        volume={0}
+        className="aspect-video w-full xl:w-2/3"
+        width="100%"
+        height="100%"
+      />
     </div>
   );
 });