Stabilize journal entry width

src/routes/journals/[journal_id]/entry/[journal_entry_id]/+page.svelte

@@ -14,13 +14,10 @@ import { liveQuery } from 'dexie';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 // import { core_func } from '$lib/ae_core/ae_core_functions';
 import { db_journals } from '$lib/ae_journals/db_journals';
-import { ae_loc, ae_sess, ae_api, ae_trig } from '$lib/stores/ae_stores';
+import { ae_loc } from '$lib/stores/ae_stores';
 import {
     journals_loc,
-    journals_sess,
+    journals_slct
-    journals_slct,
-    journals_prom,
-    journals_trig
 } from '$lib/ae_journals/ae_journals_stores';
 
 import Journal_entry_view from './../../../ae_comp__journal_entry_obj_id_view.svelte';
@@ -28,18 +25,28 @@ import Journal_entry_view from './../../../ae_comp__journal_entry_obj_id_view.sv
 import AeCompModalJournalExport from '../../../ae_comp__modal_journal_export.svelte';
 
 interface Props {
-    data: any;
+    data: {
+        account_id: string;
+        [key: string]: unknown;
+    };
 }
 
 let { data }: Props = $props();
 
+interface JournalPageAccount {
+    slct: {
+        journal_id: string | null;
+        journal_entry_id?: string | null;
+    };
+}
+
 // let ae_promises: key_val = {};
 // let ae_tmp: key_val = {};
 // let ae_triggers: key_val = {};
 
 // Variables
 // *** Quickly pull out data from parent(s)
-let ae_acct = $derived(data[data.account_id]);
+let ae_acct = $derived(data[data.account_id] as JournalPageAccount);
 let show_export_modal = $state(false);
 
 $effect(() => {
@@ -266,12 +273,12 @@ $effect(() => {
         class="
         ae_journals__journal_entry
         mx-auto
-        flex max-h-max min-h-full max-w-max
+        flex w-full max-w-6xl min-w-0
-        min-w-full
         grow
         flex-col
-        items-center
+        items-stretch
         gap-1
+        px-2 md:px-4
         space-y-2
         ">
         <!-- {#if $lq__journal_entry_obj} -->

src/routes/journals/ae_comp__journal_entry_editor.svelte

@@ -6,18 +6,20 @@
  */
 import { LockKeyhole, RefreshCcw, Save } from '@lucide/svelte';
 import { ae_loc } from '$lib/stores/ae_stores';
-import {
+import { journals_loc } from '$lib/ae_journals/ae_journals_stores';
-    journals_loc,
-    journals_sess
-} from '$lib/ae_journals/ae_journals_stores';
 import AE_Comp_Editor_CodeMirror from '$lib/elements/element_editor_codemirror.svelte';
 import type { ae_JournalEntry, ae_Journal } from '$lib/types/ae_types';
 
+type JournalEntryDraft = Partial<ae_JournalEntry> & {
+    content?: string | false;
+    [key: string]: unknown;
+};
+
 interface Props {
     entry: ae_JournalEntry;
     journal: ae_Journal;
-    tmp_entry_obj: any; // Bindable
+    tmp_entry_obj: JournalEntryDraft; // Bindable
-    editor_view?: any; // Bindable
+    editor_view?: unknown; // Bindable
     has_changed: boolean;
     updated_idb: boolean;
     on_save: () => void;
@@ -38,21 +40,41 @@ let {
 const is_editing = $derived(
     $journals_loc.entry.edit_kv[entry.journal_entry_id] === 'current'
 );
+const preferred_viewer = $derived((journal?.cfg_json?.pref_viewer ?? 'rendered').toLowerCase());
 </script>
 
 <div
-    class="journal-entry-editor-wrapper flex w-full grow flex-col items-center">
+    class="journal-entry-editor-wrapper flex w-full min-w-0 grow flex-col items-stretch">
     {#if !is_editing}
         <!-- VIEW MODE -->
-        <div class="prose dark:prose-invert w-full max-w-6xl p-4">
+        <div class="w-full min-w-0">
-            {@html tmp_entry_obj?.content_md_html || ''}
+            {#if preferred_viewer === 'codemirror'}
+                <AE_Comp_Editor_CodeMirror
+                    bind:content={tmp_entry_obj.content}
+                    bind:editor_view
+                    theme_mode={$ae_loc.theme_mode}
+                    language="markdown"
+                    readonly={true}
+                    show_toolbar={false}
+                    class_li="w-full rounded-lg bg-surface-50 shadow-lg dark:bg-surface-800" />
+            {:else if preferred_viewer === 'plain'}
+                <div
+                    class="bg-surface-50 dark:bg-surface-800 text-surface-800 dark:text-surface-100 w-full rounded-lg border border-gray-200 p-4 font-mono text-sm whitespace-pre-wrap wrap-break-word shadow-lg dark:border-gray-700">
+                    {tmp_entry_obj?.content || ''}
+                </div>
+            {:else}
+                <div
+                    class="prose dark:prose-invert w-full max-w-none overflow-x-auto rounded-lg border border-gray-200 bg-white p-4 shadow-lg dark:border-gray-700 dark:bg-gray-900">
+                    {@html tmp_entry_obj?.content_md_html || ''}
+                </div>
+            {/if}
         </div>
     {:else}
         <!-- EDIT MODE -->
         {#if !tmp_entry_obj?.content && tmp_entry_obj?.content_encrypted}
             <!-- Decryption Required Message -->
             <div
-                class="bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 border-error-500 flex w-full max-w-6xl flex-col gap-4 rounded-lg border p-4">
+                class="bg-error-100 dark:bg-error-900/30 text-error-900 dark:text-error-100 border-error-500 flex w-full flex-col gap-4 rounded-lg border p-4">
                 <div class="space-y-2">
                     <div class="flex items-center gap-2 font-bold">
                         <LockKeyhole size="1.25em" />
@@ -61,12 +83,6 @@ const is_editing = $derived(
                     <p class="text-sm">
                         This entry must be decrypted before it can be edited.
                     </p>
-                    {#if tmp_entry_obj?.content === false}
-                        <p
-                            class="text-error-500 text-xs font-bold tracking-widest uppercase">
-                            Decryption failed. Incorrect passcode.
-                        </p>
-                    {/if}
                 </div>
 
                 {#if $ae_loc.edit_mode && on_force_reset}
@@ -94,11 +110,11 @@ const is_editing = $derived(
                     bind:editor_view
                     theme_mode={$ae_loc.theme_mode}
                     placeholder="Write using Markdown..."
-                    class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full max-w-6xl bg-surface-50 dark:bg-surface-800" />
+                    class_li="p-2 preset-outlined-warning-300-700 shadow-lg rounded-lg w-full bg-surface-50 dark:bg-surface-800" />
             {:else}
                 <textarea
                     bind:value={tmp_entry_obj.content}
-                    class="textarea h-[500px] w-full max-w-6xl grow rounded-lg border-orange-500/30 p-4 font-mono break-words whitespace-pre-wrap shadow-lg"
+                    class="textarea h-125 w-full grow rounded-lg border-orange-500/30 p-4 font-mono whitespace-pre-wrap wrap-break-word shadow-lg"
                     placeholder="Edit content..."></textarea>
             {/if}
 

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -366,7 +366,25 @@ async function handle_content_decryption() {
 
 function handle_marked(text: string) {
     if (!text) return '';
-    return marked.parse(text.replace(/^[​‌‍‎‏]/, ''));
+    let start_index = 0;
+    while (start_index < text.length) {
+        const code_point = text.codePointAt(start_index);
+        if (
+            code_point === 0x200b ||
+            code_point === 0x200c ||
+            code_point === 0x200d ||
+            code_point === 0x200e ||
+            code_point === 0x200f ||
+            code_point === 0xfeff
+        ) {
+            start_index += code_point > 0xffff ? 2 : 1;
+            continue;
+        }
+
+        break;
+    }
+
+    return marked.parse(text.slice(start_index));
 }
 
 async function handle_force_reset() {
@@ -402,7 +420,7 @@ let show_append_modal = $state(false);
 let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
 </script>
 
-<div class="group/entry-view relative w-full">
+<div class="group/entry-view relative w-full min-w-0">
     <!-- Subtle glow — same technique as the rest of the Journals module -->
     <div
         class="from-primary-500/50 to-secondary-500/50 pointer-events-none absolute -inset-1
@@ -411,7 +429,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 flex-col gap-2 rounded-xl
+        class="ae_view relative flex h-full w-full min-w-0 flex-col gap-2 rounded-xl
            border border-gray-200
            bg-white p-2 shadow-xl
            dark:border-gray-700 dark:bg-gray-900"
@@ -451,6 +469,7 @@ let modal_mode: 'append' | 'prepend' | 'auto' = $state('auto');
                 class="relative grow overflow-hidden rounded-lg border border-gray-200
                    bg-gray-50 p-1
                    shadow-md dark:border-gray-700 dark:bg-gray-800
+                   w-full min-w-0 items-stretch
                    {$journals_loc.entry.edit_kv[
                     $lq__journal_entry_obj?.journal_entry_id
                 ] == 'current'