some styling stuff

client/src/components/Forms/PostFormCard.tsx

@@ -53,7 +53,7 @@ const tagMapping = {
 const NewNoteCard = ({
     refEvent,
     tagType
-    }: FormProps) => {
+}: FormProps) => {
     const [comment, setComment] = useState("");
     const [file, setFile] = useState("");
     const [sk, setSk] = useState(generatePrivateKey());
@@ -67,6 +67,7 @@ const NewNoteCard = ({
     const [difficulty, setDifficulty] = useState(
         localStorage.getItem("difficulty") || "21"
     );
+    const [fileSizeError, setFileSizeError] = useState(false);
 
     const [uploadingFile, setUploadingFile] = useState(false);
     const [doingWorkProp, setDoingWorkProp] = useState(false);
@@ -145,12 +146,12 @@ const NewNoteCard = ({
                 setDoingWorkProp(true);
             }}
         >
-            <input type="hidden" name="MAX_FILE_SIZE" defaultValue={4194304} />
+            <input type="hidden" name="MAX_FILE_SIZE" defaultValue={2.5 * 1024 * 1024} />
             <div
                 id="togglePostFormLink"
                 className="text-lg text-neutral-500 text-center mb-2 font-semibold"
             >
-                Start a New Thread
+                {tagType === 'Reply' ? 'Reply to thread' : 'Start Thread'}
             </div>
             <div className="px-4 pt-4 flex flex-col bg-neutral-900 rounded-lg">
                 <textarea
@@ -193,10 +194,16 @@ const NewNoteCard = ({
                                     onChange={async (e) => {
                                         const file_input = e.target.files?.[0];
                                         if (file_input) {
+                                            // Check if file size is greater than 2.5MB
+                                            if (file_input.size > 2.5 * 1024 * 1024) {
+                                                setFileSizeError(true);
+                                                return;
+                                            }
                                             setUploadingFile(true);
                                             const attachedFile = await attachFile(file_input);
                                             setFile(attachedFile);
                                             setUploadingFile(false);
+                                            setFileSizeError(false);
                                         }
                                     }}
                                 />
@@ -216,6 +223,9 @@ const NewNoteCard = ({
                     </div>
                 </div>
             </div>
+            {fileSizeError ? (
+                <span className="text-red-500">File size should not exceed 2.5MB</span>
+            ) : null}
             {doingWorkProp ? (
                 <div className="flex animate-pulse text-sm text-gray-300">
                     <CpuChipIcon className="h-4 w-4 ml-auto" />

client/src/components/Modals/Card.tsx

@@ -60,8 +60,24 @@ const PostCard = ({
 
     return (
         <CardContainer>
-                <div className={`flex flex-col gap-2 ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
+                <div className={`flex flex-col gap-2`}>
-                    <div className="flex justify-between items-center">
+                    <div className={`flex flex-col break-words ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
+                        <ContentPreview key={event.id} comment={comment} />
+                    </div>
+                    {renderMedia(file)}
+                    {repliedTo && <div className="flex items-center mt-1" >
+                        <span className="text-xs text-gray-500">Reply to: </span>
+                        {uniqBy(repliedTo, 'pubkey').map((event, index) => (
+                            <div key={index}>
+                                {event.kind === 0 ? (
+                                    <img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
+                                ) : (
+                                    <div className={`h-4 w-4 ${getIconFromHash(event.pubkey)} rounded-full`} />
+                                )}
+                            </div>
+                        ))}
+                    </div>}
+                    <div className={`flex justify-between items-center ${type !== "OP" ? 'hover:cursor-pointer' : ''}`} onClick={handleClick}>
                         <div className="flex items-center gap-2.5">
                             {metadataParsed ? 
                                 <img
@@ -90,23 +106,7 @@ const PostCard = ({
                             </div>
                         </div>
                     </div>
-                    {repliedTo && <div className="flex items-center my-1" >
-                        <span className="text-xs text-gray-500">Reply to: </span>
-                        {uniqBy(repliedTo, 'pubkey').map((event, index) => (
-                            <div key={index}>
-                                {event.kind === 0 ? (
-                                    <img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
-                                ) : (
-                                    <div className={`h-5 w-5 ${getIconFromHash(event.pubkey)} rounded-full`} />
-                                )}
                 </div>
-                        ))}
-                    </div>}
-                    <div className="flex flex-col break-words">
-                        <ContentPreview key={event.id} comment={comment} />
-                    </div>
-                </div>
-            {renderMedia(file)}
         </CardContainer>
     );
 };

client/src/components/Modals/CardContainer.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from "react";
 export default function CardContainer({ children }: PropsWithChildren) {
   return (
     <div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
-      <div className="card-body pb-2">{children}</div>
+      <div className="card-body">{children}</div>
     </div>
   );
 }

client/src/components/Modals/CardModals/QuoteEmbed.tsx

@@ -70,6 +70,10 @@ const QuoteEmbed = ({
   return (
     <div className="p-3 rounded-lg border border-neutral-700 bg-neutral-800">
       <div className="flex flex-col">
+        <div className="flex flex-col break-words">
+          <ContentPreview key={event.id} comment={comment} />
+        </div>
+        {renderMedia(file)}
         <div className="flex justify-between items-center">
           <div className="flex items-center gap-1.5">
             {metadataParsed ? (
@@ -84,17 +88,13 @@ const QuoteEmbed = ({
             ) : (
               <>
                 <div
-                  className={`h-5 w-5 bg-gradient-to-r ${colorCombo} rounded-full`}
+                  className={`h-4 w-4 bg-gradient-to-r ${colorCombo} rounded-full`}
                 />
                 <div className="text-sm font-medium">Anonymous</div>
               </>
             )}
           </div>
         </div>
-        <div className="flex flex-col break-words">
-          <ContentPreview key={event.id} comment={comment} />
-        </div>
-        {renderMedia(file)}
       </div>
     </div>
   );

client/src/components/Modals/CardModals/TextModal.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import QuoteEmbed from "./QuoteEmbed";
 import { Event } from "nostr-tools";
 import { useEffect, useState } from "react";
@@ -44,7 +45,10 @@ const ContentPreview = ({ key, comment }: { key: string; comment: string }) => {
 
   return (
     <div className="gap-2 flex flex-col break-words text-sm">
-      {isExpanded ? finalComment : finalComment.slice(0, 350)}
+      {isExpanded 
+        ? finalComment.split('\n').map((line, i) => <React.Fragment key={i}>{line}<br/></React.Fragment>) 
+        : finalComment.slice(0, 350).split('\n').map((line, i) => <React.Fragment key={i}>{line}<br/></React.Fragment>)
+      }
       {finalComment.length > 350 && (
         <button
           className="text-sm text-neutral-500"

client/src/utils/FileUpload.tsx

@@ -39,6 +39,7 @@ export const renderMedia = (file: string) => {
       <video
         controls
         muted
+        src={file + "#t=0.1"}
         preload="metadata"
         className="thumb mt-2 rounded-md w-full"
       >