chore: fix some issues with code relating to the card

src/components/VencordSettings/SpecialCard.tsx

@@ -50,20 +50,12 @@ export function SpecialCard({ title, subtitle, description, cardImage, backgroun
                 <div className={cl("card-flex-main")}>
                     <Forms.FormTitle className={cl("title")} tag="h5">{title}</Forms.FormTitle>
                     <Forms.FormText className={cl("subtitle")}>{subtitle}</Forms.FormText>
-                    <Forms.FormText className={cl("text")}>
+                    <Forms.FormText className={cl("text")}>{description}</Forms.FormText>
-                        {description.split("\n").map((line, index) => (
-                            <React.Fragment key={index}>
-                                {line}
-                                <br />
-                            </React.Fragment>
-                        ))}
-                    </Forms.FormText>
 
                     {children}
                 </div>
                 {
                     cardImage && (
-                        <>
                         <div className={cl("image-container")}>
                             <img
                                 role="presentation"
@@ -72,7 +64,6 @@ export function SpecialCard({ title, subtitle, description, cardImage, backgroun
                                 className={cl("image")}
                             />
                         </div>
-                        </>
                     )
                 }
             </div>

src/components/VencordSettings/specialCard.css

@@ -34,6 +34,7 @@
     color: black;
     font-size: 1em;
     margin-top: 1em;
+    white-space: pre-line;
 }
 
 .vc-special-seperator {