add note wrapper

src/app/note/components/replies/form.tsx

@@ -36,7 +36,7 @@ export default function NoteReplyForm({ id }: { id: string }) {
   };
 
   return (
-    <div className="flex gap-3 px-5 py-4">
+    <div className="flex gap-3 px-3 py-4">
       <div>
         <div className="relative h-9 w-9 shrink-0 overflow-hidden rounded-md">
           <Image src={profile?.picture} alt={account?.pubkey} className="h-9 w-9 rounded-md object-cover" />

src/app/note/components/replies/item.tsx

@@ -6,7 +6,7 @@ export default function Reply({ data }: { data: any }) {
   const content = noteParser(data);
 
   return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-3.5 hover:bg-black/20">
+    <div className="flex h-min min-h-min w-full select-text flex-col px-3 py-3">
       <div className="flex flex-col">
         <NoteReplyUser pubkey={data.pubkey} time={data.created_at} />
         <div className="-mt-[17px] pl-[48px]">

src/app/note/components/replies/list.tsx

@@ -42,13 +42,13 @@ export default function RepliesList({ id }: { id: string }) {
           <NoteReplyForm id={id} />
           {error && <div>failed to load</div>}
           {!data ? (
-            <div className="flex gap-2 px-5 py-4">
+            <div className="flex gap-2 px-3 py-4">
               <div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800"></div>
               <div className="flex w-full flex-1 flex-col justify-center gap-1">
                 <div className="flex items-baseline gap-2 text-sm">
-                  <div className="h-2.5 w-20 animate-pulse rounded bg-zinc-800"></div>
+                  <div className="h-2.5 w-20 animate-pulse rounded-sm bg-zinc-800"></div>
                 </div>
-                <div className="h-4 w-44 animate-pulse rounded bg-zinc-800"></div>
+                <div className="h-4 w-44 animate-pulse rounded-sm bg-zinc-800"></div>
               </div>
             </div>
           ) : (