More changes based on feedback

src/lib/ae_utils.ts

@@ -130,6 +130,11 @@ export let iso_datetime_formatter = function iso_datetime_formatter(raw_datetime
 }
 
 
+/* This utility function will add commas to a number. */
+function number_w_commas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
 
 /* This utility function looks for any form data with the prefixed name passed and returns a new object.
  * This function is used heavily! Be very careful making changes!!!
@@ -473,6 +478,7 @@ function create_video_element({account_id, base_url, hosted_file_id, filename=nu
 
 export let ae_util = {
     iso_datetime_formatter: iso_datetime_formatter,
+    number_w_commas: number_w_commas,
     extract_prefixed_form_data: extract_prefixed_form_data,
     process_permission_checks: process_permission_checks,
     handle_url_and_message: handle_url_and_message,

src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte

@@ -4,6 +4,11 @@ import { onMount } from 'svelte';
 import { fade } from 'svelte/transition';
 
 
+function number_w_commas(x) {
+    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+}
+
+
 // This works and uses local storage:
 // store_current_tab must be prefixed with $ to be reactive.
 import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
@@ -541,7 +546,9 @@ async function handle_update__event_presenter({
     {#if $store_current_tab === 'start'}
 
 
-    <h3>CHOW Speaker Listing Information</h3>
+    <section class="space-y-4">
+
+    <h3 class="h4">CHOW Speaker Listing Information</h3>
 
     <p>Please enter your personal and professional information below.</p>
 
@@ -552,9 +559,6 @@ async function handle_update__event_presenter({
         on:submit|preventDefault={handle_submit_form}
         >
 
-
-
-
     <fieldset class="mb-8 flex flex-wrap gap-4">
         <legend class="legend">Speaker</legend>
 
@@ -671,21 +675,35 @@ async function handle_update__event_presenter({
 
     </form>
 
+    </section>
+
 
     {:else if $store_current_tab === 'biograhpy'}
 
 
-    <section class="biograhpy">
+    <section class="biograhpy space-y-4">
+
     <form
         class="modal-form {cForm}"
         on:submit|preventDefault={handle_submit_form}
         >
-       <label class="label ae_label event_presenter__biography">
+       <label class="label ae_label event_presenter__biography required variant-glass-warning space-y-4">
-            <span class="label">Speaker Biography</span>
+            <span class="label">
-            <textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" required rows="10" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography the speaker"></textarea>
+                <h3 class="h4">Speaker Biography</h3>
+                <p>This is required.</p>
+            </span>
+            <textarea
+                name="biography"
+                id="biography"
+                class="textarea ae_value event_presenter__biography tinymce_editor editor_basic"
+                class:variant-glass-error={($slct.event_presenter_obj.biography && $slct.event_presenter_obj.biography.length >1375 ? true : false)}
+                required
+                rows="16" cols="70"
+                bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography the speaker"></textarea>
         </label>
-        <p>Biography length: {($slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography.length : 0)} characters</p>
+        <p>Biography length: {($slct.event_presenter_obj.biography ? ae_util.number_w_commas($slct.event_presenter_obj.biography.length) : 0)} characters</p>
-        <p>1,375 is roughly 250 to 300 words</p>
+        <p>This is plain text only.</p>
+        <!-- <p>1,375 characters is roughly 250 to 300 words</p> -->
 
         <div class="flex flex-wrap gap-2 p-1">
         <button
@@ -718,7 +736,7 @@ async function handle_update__event_presenter({
         on:submit|preventDefault={handle_submit_form_files}
         >
 
-    <section>
+    <section class="space-y-4">
         <h2 class="h3">Headshot Photo</h2>
         <p>Upload your headshot photo here. This is required.</p>
         <label for="image_headshot">