Now with presenter biography. Used the speakers collection that was done for CHOW as the basis.

src/lib/element_manage_event_file_li.svelte

@@ -56,7 +56,7 @@ onMount(() => {
 </script>
 
 
-<section class="svelte_component event_file_uploaded_manage {container_class_li.join(' ')}">
+<section class="svelte_component event_file_uploaded_manage {container_class_li}">
 <button
     type="button"
     on:click={() => {
@@ -112,12 +112,12 @@ onMount(() => {
                     return_file: true,
                     filename: event_file_obj.filename,
                     auto_download: true,
-                    log_lvl: 1
+                    log_lvl: 0
                 });
 
                 // window.postMessage({ type: 'download_event_file', event_file_id: event_file_obj.event_file_id_random, filename: event_file_obj.filename, auto_download: true }, '*');
             }}
-            class="btn btn-md variant-soft-primary hover:variant-filled-primary min-w-96"
+            class="btn btn-sm lg:btn-md variant-soft-primary hover:variant-filled-primary min-w-72 lg:min-w-96"
             title={`Download this file: ${event_file_obj.filename} [API] -- SHA256 hash: ${event_file_obj.hash_sha256.slice(0, 10)}...`}
             >
             {#await ae_promises[event_file_obj.event_file_id_random]}
@@ -182,7 +182,7 @@ onMount(() => {
                 ae_promises.delete__event_file_obj = await events_func.handle_delete_ae_obj_id__event_file({
                     api_cfg: $ae_api,
                     event_file_id: event_file_obj.event_file_id_random,
-                    log_lvl: 2
+                    log_lvl: 1
                 })
             }}
             class="btn btn-sm variant-glass-tertiary hover:variant-soft-success"
@@ -251,7 +251,7 @@ onMount(() => {
                 }}
                 class="select min-w-fit max-w-fit text-sm mx-1"
                 >
-                <option value={null} selected={!event_file_obj.file_purpose}>-- purpose not set --</option>
+                <option value={null} selected={!event_file_obj.file_purpose} class="text-xs">-- purpose not set --</option>
                 <option value="outline" selected={event_file_obj.file_purpose === 'outline'}>1. Outline</option>
                 <option value="draft" selected={event_file_obj.file_purpose === 'draft'}>2. Draft</option>
                 <option value="final" selected={event_file_obj.file_purpose === 'final'}>3. Final</option>
@@ -268,10 +268,10 @@ onMount(() => {
 
     </td>
     <td class="event_file_info file_meta text-gray-500">
-        <div class="flex flex-col text-sm">
+        <div class="flex flex-col text-xs lg:text-sm">
         <!-- {event_file_obj.hosted_file_content_type} -->
 
-        <span class="w-full flex flex-row justify-between">
+        <span class="w-full flex flex-col lg:flex-row justify-between">
         <span>
             Type:
             <strong>{event_file_obj.extension} <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
@@ -292,7 +292,7 @@ onMount(() => {
         </span>
         </span>
 
-        <span class="w-full flex flex-row justify-between">
+        <span class="w-full flex flex-col lg:flex-row justify-between">
         <span title="SHA 256: {event_file_obj.hash_sha256}">
             Hash: <strong>{event_file_obj.hash_sha256.slice(0, 10)}&mldr;</strong>
         </span>

src/routes/events_pres_mgmt/session/[slug]/+page.svelte

@@ -1631,6 +1631,7 @@ function send_sign_in_poc_email(
                 link_to_id={event_presentation_obj.event_presentation_id_random}
                 allow_basic={$events_loc.auth__kv.session[$events_slct.event_session_id] || $events_loc.auth__kv.presenter[$events_slct.event_presenter_id]}
                 allow_moderator={$events_loc.auth__kv.session[$events_slct.event_session_id]}
+                container_class_li={'ae_modal_scrollfix'}
                 />
 
             <!-- Show files list for this presentation -->

src/routes/events_pres_mgmt/session/[slug]/presenter_view.svelte

@@ -25,6 +25,7 @@ let ae_placeholder_li: key_val = {};
 let ae_promises: key_val = {}; // Promise<any>;
 let ae_tmp: key_val = {};
 ae_tmp.show__file_li = true;
+
 let ae_triggers: key_val = {};
 
 // let lq__event_session_obj = liveQuery(
@@ -45,6 +46,12 @@ let lq__event_file_obj_li = liveQuery(
 );
 
 
+ae_tmp.biography = null;
+$: if ($lq__event_presenter_obj?.biography && ae_tmp.biography === null) {
+    ae_tmp.biography = JSON.parse(JSON.stringify($lq__event_presenter_obj.biography));
+}
+
+// console.log(`ae_tmp.biography:`, $lq__event_presenter_obj?.biography);
 $slct.person_obj_kv = {}; // This is intended for the POC lookup list when generated.
 
 // $events_slct.event_presenter_obj = $lq__event_presenter_obj;
@@ -64,6 +71,7 @@ onMount(() => {
     console.log(`$events_slct.event_presenter_id:`, $events_slct.event_presenter_id);
 
     $slct_trigger = 'load__event_file_obj_li';
+    // ae_tmp.biography = $lq__event_presenter_obj?.biography;
 });
 
 
@@ -778,8 +786,8 @@ async function handle_delete__event_file({event_file_id}) {
                     log_lvl: 1,
                 })
                 .then(function (update_result) {
-                    console.log(update_result);
-                    return update_result;
+                    // console.log(update_result);
+                    // return update_result;
                 });
 
                 return person_update_result;
@@ -792,6 +800,75 @@ async function handle_delete__event_file({event_file_id}) {
         </button>
         {/if}
 
+    </li>
+
+    <!-- The presenters biography. There should be a character counter. -->
+    <li>
+        <div class="label event_presenter__biography required space-y-4">
+            <label for="presenter__biography" class="label">
+                <span class="fas fa-book"></span>
+                Presenter Biography
+                <span class="text-sm text-gray-500">
+                    (75 to 100 words or 600 character limit)
+                </span>
+            </label>
+
+            <textarea
+                name="biography"
+                id="presenter__biography"
+                class="textarea ae_value event_presenter__biography font-mono"
+                class:variant-glass-error={(ae_tmp.biography && ae_tmp.biography.length >600 ? true : false)}
+                required
+                rows="8" cols="70"
+                bind:value={ae_tmp.biography}
+                placeholder="Enter brief biography here"></textarea>
+            <!-- {/if} -->
+
+        </div>
+        <p>Biography length: {(ae_tmp.biography ? ae_util.number_w_commas(ae_tmp.biography.length) : 0)} characters; {(ae_tmp.biography ? ae_util.number_w_commas(ae_util.count_words(ae_tmp.biography)) : 0)} estimated words</p>
+        <!-- <p>Biography length: </p> -->
+        <p>The biography should be plain text only and be at most 100 words.</p>
+        <!-- <p>1,250 characters is roughly 250 words</p> -->
+        <!-- <p>1,375 characters is roughly 250 to 300 words</p> -->
+
+        <div class="flex flex-wrap gap-2 p-1">
+        <button
+            type="button"
+            class="btn btn-md variant-glass-primary hover:variant-filled-primary"
+            disabled={(ae_tmp.biography == $lq__event_presenter_obj.biography)}
+            on:click={() => {
+                console.log('*** Save button clicked ***');
+
+                let event_presenter_data = {
+                    'biography': ae_tmp.biography,
+                };
+
+                ae_promises.update__event_presenter_obj = events_func.handle_update_ae_obj__event_presenter({
+                    api_cfg: $ae_api,
+                    event_presenter_id: $lq__event_presenter_obj.event_presenter_id_random,
+                    data_kv: event_presenter_data,
+                    log_lvl: 1,
+                })
+                .then(function (update_result) {
+                    // console.log(update_result);
+                    // return update_result;
+                });
+
+            }}
+            >
+            {#await ae_promises.update__event_presenter_obj}
+                <span class="fas fa-spinner fa-spin mx-1"></span>
+            {:then}
+                {#if (ae_tmp.biography == $lq__event_presenter_obj.biography)}
+                    <span class="fas fa-check mx-1"></span>
+                {:else}
+                    <span class="fas fa-save mx-1"></span>
+                {/if}
+            {/await}
+            Save Biography
+        </button>
+
+        </div>
 
     </li>
 </ul>