From 9e4a67941e57d192742ebe7724de86cd869f889b Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 30 Apr 2025 18:25:02 -0400
Subject: [PATCH] Saving work...

---
 .../journals/[journal_id]/+layout.svelte      | 25 +++++++++++++++++++
 .../ae_comp__journal_entry_obj_li.svelte      |  1 +
 2 files changed, 26 insertions(+)

diff --git a/src/routes/journals/[journal_id]/+layout.svelte b/src/routes/journals/[journal_id]/+layout.svelte
index 1fddfa2e..c5b32c00 100644
--- a/src/routes/journals/[journal_id]/+layout.svelte
+++ b/src/routes/journals/[journal_id]/+layout.svelte
@@ -471,6 +471,31 @@ async function handle_update_journal() {
                     </select>
                 </div>
 
+                <!-- Select hover max height options (Tailwind CSS) -->
+                <div>
+                    <span class="text-sm text-gray-500 hidden sm:inline">
+                        Journal Entry List Hover Max Height:
+                    </span>
+                    <select
+                        bind:value={$journals_slct.tmp_journal_obj.cfg_json.entry_li_hover_max_height}
+                        onchange={(event) => {
+                            $journals_slct.tmp_journal_obj.cfg_json.entry_li_hover_max_height = event.target.value;
+                            console.log('Selected max height:', $journals_slct.tmp_journal_obj.cfg_json.entry_li_hover_max_height);
+                        }}
+                        class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition text-xs w-full mb-2 max-w-48"
+                        title="Select maximum height for journal entries in the list"
+                        >
+                        <option value="">Default (auto)</option>
+                        <!-- <option value="none">None (no limit)</option> -->
+                        <option value="hover:max-h-8">Small (8)</option>
+                        <option value="hover:max-h-16">Medium (16)</option>
+                        <option value="hover:max-h-32">Large (32)</option>
+                        <option value="hover:max-h-96">Extra Large (96)</option>
+                        <option value="hover:max-h-full">Full (no limit)</option>
+
+                    </select>
+                </div>
+
                 <!-- Select color scheme for the journal entries -->
                 <!-- Should select from the common Tailwind CSS options. Examples: slate, blue, gray, green, orange, red, yellow, etc. -->
                 <!-- Saves to cfg_json.color_scheme -->
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
index bb0f606e..4a1d6040 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_li.svelte
@@ -435,6 +435,7 @@ $effect(() => {
                     hover:z-10 hover:h-auto hover:max-h-full
                     hover:bg-blue-100 hover:border-blue-500 dark:hover:border-blue-500
                     {$journals_slct.journal_obj.cfg_json.entry_li_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_max_height} overflow-scroll` : ''}
+                    {$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height ? `${$journals_slct.journal_obj.cfg_json.entry_li_hover_max_height}` : ''}
                     "
                 >
                 {@html journals_journal_entry_obj.content}