Refactor email verification UI to enhance data display

Replaced table with div and paragraph elements to improve readability of user-submitted data. Added logic to handle multiline form data and remove empty lines, ensuring cleaner and more user-friendly presentation.

src/components/form/data/apply.tsx

@@ -89,6 +89,7 @@ export const apply: FormData = {
             min_length: 3,
             max_length: 256,
             required: true,
+            additional_info: "Please include your timezone."
         },
         {
             label: "Do you have any previous experience being staff?",

src/components/verify_email/thank_you.tsx

@@ -26,19 +26,21 @@ const ThankYou: FC = () => {
             </Helmet>
             <header className="header">Thank you for completing the form and verifying your email!<br></br>This is the data you entered:</header>
             <div className="fields">
-                <table>
+                {Object.entries(formData).map(([key, value]) => (
-                    <tbody>
+                    <div>
-                    {Object.entries(formData).map(([key, value]) => (
+                        <p><strong>{key}</strong></p>
-                        <tr className="form-data-row" id={key}>
+                        {
-                            <td className="form-data-key">{key}</td>
+                            value
-                            <td className="form-data-value">{value}</td>
+                                .split("\n")
-                        </tr>
+                                .filter(str => str.trim() !== "")
-                    ))}
+                                .map((str, index) => <p style={{ wordWrap: 'break-word' }}>{str}</p>)
-                    </tbody>
+                        }
-                </table>
+                    </div>
-            </div>
+            ))}
         </div>
-    );
+</div>
+)
+    ;
 }