From 7486150aabefe1e509998bf299564661b5f3f168 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 4 May 2026 18:32:38 -0400
Subject: [PATCH] Fix journal entry layout scrolling

---
 .../journals/[journal_id]/+layout.svelte      |  20 ++--
 .../entry/[journal_entry_id]/+page.svelte     |   2 +-
 .../ae_comp__journal_entry_header.svelte      |  28 ++---
 .../ae_comp__journal_entry_obj_id_view.svelte | 112 +++++++++---------
 4 files changed, 80 insertions(+), 82 deletions(-)

diff --git a/src/routes/journals/[journal_id]/+layout.svelte b/src/routes/journals/[journal_id]/+layout.svelte
index 97e998f8..32c6696b 100644
--- a/src/routes/journals/[journal_id]/+layout.svelte
+++ b/src/routes/journals/[journal_id]/+layout.svelte
@@ -13,14 +13,12 @@ import { FilePlus, Notebook, SquareLibrary, X } from '@lucide/svelte';
 import { liveQuery } from 'dexie';
 
 import { db_journals } from '$lib/ae_journals/db_journals';
-import { ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
+import { ae_loc, ae_api } from '$lib/stores/ae_stores';
 import {
     journals_loc,
-    journals_sess,
     journals_slct
 } from '$lib/ae_journals/ae_journals_stores';
 import { journals_func } from '$lib/ae_journals/ae_journals_functions';
-import type { ae_JournalEntry } from '$lib/types/ae_types';
 
 import Journal_entry_obj_qry from './../ae_comp__journal_entry_obj_qry.svelte';
 
@@ -85,12 +83,11 @@ $effect(() => {
     class="
         ae_journals__journal
         mx-auto
-        flex max-h-max min-h-full max-w-max
-        min-w-full
-        grow
+        flex w-full max-w-none min-w-0
         flex-col
-        items-center
+        items-stretch
         gap-1
+        min-h-0
         space-y-2
         ">
     <div
@@ -200,7 +197,12 @@ Middle-click to open in new tab`}>
                             .length}&times; Recent Entries...
                     </option>
                     <!-- loop through each key value -->
-                    {#each Object.entries($journals_loc.entry_view_history_kv as Record<string, any>).reverse() as [journal_entry_id, journal_entry_obj] (journal_entry_id)}
+                    {#each Object.entries(
+                        $journals_loc.entry_view_history_kv as Record<
+                            string,
+                            { id: string; name: string; url: string }
+                        >
+                    ).reverse() as [journal_entry_id, journal_entry_obj] (journal_entry_id)}
                         <option value={journal_entry_obj.id}>
                             {(journal_entry_obj?.name ||
                                 journal_entry_obj?.id) ??
@@ -316,7 +318,7 @@ Middle-click to open in new tab`}>
         </span>
     </div>
 
-    <div class="overflow-auto">
+    <div class="w-full min-w-0">
         {@render children?.()}
     </div>
 </section>
diff --git a/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte b/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
index d7af3d06..ab8f3523 100644
--- a/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
+++ b/src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte
@@ -273,7 +273,7 @@ $effect(() => {
         class="
         ae_journals__journal_entry
         mx-auto
-        flex w-full max-w-6xl min-w-0
+        flex w-full max-w-none min-w-0
         grow
         flex-col
         items-stretch
diff --git a/src/routes/journals/ae_comp__journal_entry_header.svelte b/src/routes/journals/ae_comp__journal_entry_header.svelte
index d8bca437..86b5448f 100644
--- a/src/routes/journals/ae_comp__journal_entry_header.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_header.svelte
@@ -67,23 +67,23 @@ function toggle_edit_mode() {
 </script>
 
 <header
-    class="flex w-full flex-col items-center justify-between gap-4 rounded-xl
+    class="flex w-full flex-wrap items-center gap-3 rounded-xl
            border border-gray-200
            bg-gray-50 p-3 shadow-sm
-           md:flex-row dark:border-gray-700 dark:bg-gray-800">
-    <div class="flex w-full items-center gap-3 md:w-auto">
+           dark:border-gray-700 dark:bg-gray-800">
+    <div class="flex min-w-0 flex-[1_1_0%] items-center gap-3">
         <a
             href="/journals/{journal.journal_id}"
-            class="btn-icon btn-icon-sm preset-tonal-surface"
+            class="btn-icon btn-icon-sm preset-tonal-surface transition-colors duration-150"
             title="Back to Journal">
             <ChevronLeft size="1.2em" />
         </a>
 
-        <div class="flex grow items-center gap-2">
+        <div class="flex min-w-0 flex-1 items-center gap-2">
             <button
                 type="button"
                 onclick={toggle_edit_mode}
-                class="btn-icon btn-icon-sm transition-all {has_changed &&
+                class="btn-icon btn-icon-sm transition-colors duration-150 {has_changed &&
                 $journals_loc.entry.edit_kv[entry.journal_entry_id] ===
                     'current'
                     ? 'preset-filled-success'
@@ -100,11 +100,11 @@ function toggle_edit_mode() {
                 <input
                     type="text"
                     bind:value={tmp_entry_obj.name}
-                    class="input input-sm focus:ring-primary-500 grow border-none bg-transparent text-lg font-bold focus:ring-2 md:min-w-[300px]"
+                    class="input input-sm h-10 min-w-0 flex-1 border-none bg-transparent text-lg font-bold leading-none transition-colors duration-150 focus:ring-2 focus:ring-primary-500"
                     placeholder="Entry Title..."
                     onchange={on_save} />
             {:else}
-                <h2 class="max-w-md truncate text-base font-bold md:text-lg">
+                <h2 class="flex h-10 min-w-0 flex-1 items-center truncate text-base font-bold leading-none md:text-lg">
                     {entry.name ||
                         ae_util.iso_datetime_formatter(
                             entry.created_on,
@@ -115,14 +115,14 @@ function toggle_edit_mode() {
         </div>
     </div>
 
-    <div class="flex w-full items-center justify-end gap-2 md:w-auto">
+    <div class="ml-auto flex shrink-0 items-center gap-2 whitespace-nowrap transition-colors duration-150">
         <!-- Auto-Save indicator -->
         {#if $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'}
             <div
                 class="border-surface-500/20 mr-1 flex items-center gap-1 border-r px-2">
                 <button
                     type="button"
-                    class="btn-icon btn-icon-sm {$journals_loc.entry.auto_save
+                    class="btn-icon btn-icon-sm transition-colors duration-150 {$journals_loc.entry.auto_save
                         ? 'text-primary-500'
                         : 'opacity-30'}"
                     onclick={() =>
@@ -147,7 +147,7 @@ function toggle_edit_mode() {
         {#if entry.private}
             <button
                 type="button"
-                class="btn-icon btn-icon-sm transition-all {is_decrypted
+                class="btn-icon btn-icon-sm transition-colors duration-150 {is_decrypted
                     ? 'preset-filled-success shadow-success-500/20 shadow-lg'
                     : 'preset-tonal-warning'}"
                 onclick={on_decrypt}
@@ -157,12 +157,12 @@ function toggle_edit_mode() {
             </button>
         {/if}
 
-        <div class="bg-surface-500/20 mx-1 h-6 w-[1px]"></div>
+        <div class="bg-surface-500/20 mx-1 h-6 w-px"></div>
 
         <!-- Unified Config Button -->
         <button
             type="button"
-            class="btn btn-sm preset-tonal-primary font-bold"
+            class="btn btn-sm preset-tonal-primary font-bold transition-colors duration-150"
             onclick={on_show_config}>
             <Settings size="1.1em" class="mr-2" /> Config
         </button>
@@ -171,7 +171,7 @@ function toggle_edit_mode() {
         {#if has_changed && save_status !== 'saving'}
             <button
                 type="button"
-                class="btn btn-sm preset-filled-primary"
+                class="btn btn-sm preset-filled-primary transition-colors duration-150"
                 onclick={on_save}>
                 <Save size="1.1em" class="mr-2" /> Save
             </button>
diff --git a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
index a55aed23..56e8569f 100644
--- a/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte
@@ -424,7 +424,7 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
                group-hover/entry-view:opacity-15 dark:opacity-10 dark:group-hover/entry-view:opacity-20">
     </div>
     <section
-        class="ae_view relative flex h-full w-full min-w-0 flex-col gap-4 rounded-xl
+        class="ae_view relative flex w-full min-w-0 flex-col gap-4 rounded-xl
            border border-surface-200-800
            bg-surface-50-900 p-2 shadow-xl"
         bind:clientHeight={$ae_loc.iframe_height_modal_body}>
@@ -441,65 +441,61 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
                 {save_status}
                 {log_lvl} />
 
-            <div class="grid w-full min-w-0 gap-4 lg:grid-cols-[minmax(0,1fr)_20rem]">
-                <div class="min-w-0 space-y-4">
-                    {#if decryption_error}
-                        <div
-                            class="bg-error-100 border-error-300 flex w-full animate-bounce items-center justify-between rounded-lg border p-4 shadow-xl">
-                            <div class="text-error-700 flex items-center gap-4 font-bold">
-                                <CircleAlert size="2.5em" />
-                                <span class="text-xl">{decryption_error}</span>
-                            </div>
-                            <button
-                                type="button"
-                                class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
-                                onclick={() => (decryption_error = null)}>
-                                <CircleX size="1.2em" class="mr-2" /> Dismiss
-                            </button>
-                        </div>
-                    {/if}
-
-                    <!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
-                    <section
-                        class="relative grow overflow-hidden rounded-xl border border-surface-200-800
-                           bg-surface-100-900 p-2 shadow-md min-w-0
-                           {$journals_loc.entry.edit_kv[
-                            $lq__journal_entry_obj?.journal_entry_id
-                        ] == 'current'
-                            ? 'ring-primary-500/40 ring-2 ring-inset'
-                            : ''}">
-                        <div class="absolute top-2 right-2 z-10">
-                            <AE_Comp_Journal_Entry_AiTools
-                                content={tmp_entry_obj.content}
-                                bind:summary={tmp_entry_obj.summary}
-                                on_save={() => update_journal_entry()}
-                                {log_lvl} />
-                        </div>
-
-                        <AE_Comp_Journal_Entry_Editor
-                            entry={$lq__journal_entry_obj}
-                            journal={$lq__journal_obj}
-                            bind:tmp_entry_obj
-                            bind:editor_view
-                            has_changed={has_unsaved_changes}
-                            updated_idb={false}
-                            on_save={() => update_journal_entry()}
-                            on_force_reset={handle_force_reset} />
-                    </section>
-
-                    <AE_Comp_Journal_Entry_ObjFileLi
-                        {log_lvl}
-                        link_to_type="journal_entry"
-                        link_to_id={$lq__journal_entry_obj.journal_entry_id}
-                        {lq__journal_entry_obj} />
-                </div>
-
-                <aside class="min-w-0 space-y-4 lg:sticky lg:top-4 self-start">
+            <div class="w-full min-w-0 space-y-4">
+                {#if decryption_error}
                     <div
-                        class="rounded-xl border border-surface-200-800 bg-surface-100-900 p-3 shadow-sm">
-                        <AE_Comp_Journal_Entry_Metadata entry={$lq__journal_entry_obj} />
+                        class="bg-error-100 border-error-300 flex w-full animate-bounce items-center justify-between rounded-lg border p-4 shadow-xl">
+                        <div class="text-error-700 flex items-center gap-4 font-bold">
+                            <CircleAlert size="2.5em" />
+                            <span class="text-xl">{decryption_error}</span>
+                        </div>
+                        <button
+                            type="button"
+                            class="btn btn-sm preset-tonal-error hover:preset-filled-error-500 font-bold"
+                            onclick={() => (decryption_error = null)}>
+                            <CircleX size="1.2em" class="mr-2" /> Dismiss
+                        </button>
                     </div>
-                </aside>
+                {/if}
+
+                <!-- ring-2 inset indicates "edit mode" in both light and dark without a background swap -->
+                <section
+                    class="relative grow overflow-hidden rounded-xl border border-surface-200-800
+                       bg-surface-100-900 p-2 shadow-md min-w-0
+                       {$journals_loc.entry.edit_kv[
+                        $lq__journal_entry_obj?.journal_entry_id
+                    ] == 'current'
+                        ? 'ring-primary-500/40 ring-2 ring-inset'
+                        : ''}">
+                    <div class="absolute top-2 right-2 z-10">
+                        <AE_Comp_Journal_Entry_AiTools
+                            content={tmp_entry_obj.content}
+                            bind:summary={tmp_entry_obj.summary}
+                            on_save={() => update_journal_entry()}
+                            {log_lvl} />
+                    </div>
+
+                    <AE_Comp_Journal_Entry_Editor
+                        entry={$lq__journal_entry_obj}
+                        journal={$lq__journal_obj}
+                        bind:tmp_entry_obj
+                        bind:editor_view
+                        has_changed={has_unsaved_changes}
+                        updated_idb={false}
+                        on_save={() => update_journal_entry()}
+                        on_force_reset={handle_force_reset} />
+                </section>
+
+                <AE_Comp_Journal_Entry_ObjFileLi
+                    {log_lvl}
+                    link_to_type="journal_entry"
+                    link_to_id={$lq__journal_entry_obj.journal_entry_id}
+                    {lq__journal_entry_obj} />
+
+                <div
+                    class="rounded-xl border border-surface-200-800 bg-surface-100-900 p-3 shadow-sm">
+                    <AE_Comp_Journal_Entry_Metadata entry={$lq__journal_entry_obj} />
+                </div>
             </div>
 
             <AE_Comp_Modal_Journal_Entry_Append