Making things work better. Adding CRUD select option list.

src/lib/element_ae_crud.svelte

@@ -20,10 +20,12 @@ export let api_cfg: key_val = {'api_crud_super_key': null};
 export let object_type: string;
 export let object_id: string;
 export let field_name: string;
-export let field_type: string = 'text'; // text, textarea, template (older method)
+export let field_type: string = 'text'; // button, text, textarea, template (older method), select (in progress method)
 export let field_value: any;
 export let allow_null: boolean = false;
+export let select_option_li: key_val = {};
 export let display_inline: boolean = false;
+export let display_block_edit: boolean = false;
 
 export let textarea_cols: number = 80;
 export let textarea_rows: number = 5;
@@ -154,9 +156,12 @@ async function handle_obj_field_patch(new_field_value: any) {
         </button>
     </span>
 
-    <span class="field_editing_wrapper">
+    <div
+        class:display_block_edit
+        class="field_editing_wrapper flex flex-row items-center justify-center min-w-content w-100 max-w-full"
+        >
         <button
-            class="btn btn-sm variant-soft-tertiary hover:variant-ghost-tertiary m-1"
+            class="btn btn-md variant-glass-tertiary hover:variant-ghost-tertiary m-1 transition-all"
             class:show_crud
             on:click={() => {
                 show_crud = false;
@@ -164,18 +169,36 @@ async function handle_obj_field_patch(new_field_value: any) {
             title="Close field editing"
             >
             <span class="fas fa-window-close"></span>
+            <span class="hidden md:inline">Close</span>
         </button>
 
-        <span class="field_value" class:show_crud>
+        <span
+            class="field_value grow min-w-content max-w-full"
+            class:show_crud
+            >
         {#if field_type == 'template'}
             <!-- <Element_input_v2 {...input_field_template} bind:value={field_value} /> -->
         {:else if field_type == 'button'}
             <!-- <input type="button" bind:value={field_value}> -->
             {field_value}
+        {:else if field_type == 'select'}
+            <select
+                bind:value={field_value}
+                class="select"
+                >
+                {#if select_option_li && Object.keys(select_option_li).length == 0}
+                    <option value="">-- not set --</option>
+                {:else}
+                    {#each Object.keys(select_option_li) as option}
+                        <option value={option}>{select_option_li[option]}</option>
+                    {/each}
+                {/if}
+            </select>
+
         {:else if field_type == 'text'}
             <input
                 bind:value={field_value}
-                class="input w-fit"
+                class="input min-w-64 w-96 max-w-full"
                 >
         {:else if field_type == 'textarea'}
             <textarea
@@ -205,7 +228,7 @@ async function handle_obj_field_patch(new_field_value: any) {
         </span>
 
         <button
-            class="btn btn-md variant-soft-primary hover:variant-ghost-primary m-1"
+            class="btn btn-lg variant-glass-primary hover:variant-ghost-primary m-1"
             class:show_crud
             on:click={async () => {
                 handle_obj_field_patch(field_value);
@@ -226,7 +249,7 @@ async function handle_obj_field_patch(new_field_value: any) {
                 {/if}
             {/await}
         </div>
-    </span>
+    </div>
 </div>
 
 
@@ -323,6 +346,7 @@ async function handle_obj_field_patch(new_field_value: any) {
 }
 
 .ae_crud.show_crud .field_editing_wrapper {
+    /* display: initial; */
     display: block;
     contain: content;
 
@@ -335,8 +359,8 @@ async function handle_obj_field_patch(new_field_value: any) {
     /* height: 100%; */
     max-height: 100%;
 
+    min-width: fit-content;
     width: auto;
-    /* width: 100%; */
     max-width: 100%;
 
     /* NOTE: transition when hover starts */
@@ -371,6 +395,25 @@ async function handle_obj_field_patch(new_field_value: any) {
     position: initial;
 
     z-index: 0;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: .5em;
+
+    width: 30%;
+}
+
+.ae_crud.ae_crud.show_crud.display_inline .field_editing_wrapper.display_block_edit {
+    /* display: block; */
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    width: 100%;
 }
 
 .ae_crud textarea {