From 2575a57ba7a2965f12db95b023f5284cec651245 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 2 Apr 2025 17:19:38 -0400
Subject: [PATCH] Work on overall styles

---
 src/routes/journals/+layout.svelte            | 15 ++++++++++---
 src/routes/journals/+page.svelte              | 14 +++++++++++-
 .../journals/[journal_id]/+layout.svelte      |  9 ++++----
 .../entry/[journal_entry_id]/+page.svelte     |  7 ++++--
 .../ae_comp__journal_entry_obj_id_view.svelte | 22 +++++++++----------
 5 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/routes/journals/+layout.svelte b/src/routes/journals/+layout.svelte
index 3482c02b..6a06cbcc 100644
--- a/src/routes/journals/+layout.svelte
+++ b/src/routes/journals/+layout.svelte
@@ -66,9 +66,18 @@ if (browser) {
 
 
 <!-- These are needed: h-full overflow-auto -->
-<div class="ae_journals">
+<div class="ae_journals h-full max-h-full overflow-auto flex flex-col gap-1">
 
-<nav class="submenu flex flex-row flex-wrap items-center justify-center gap-1">
+<nav
+    class="
+        submenu
+        flex flex-row flex-wrap
+        items-center justify-center
+        gap-1
+        border-b-2
+        pb-2
+        "
+    >
     <a
         href="/"
         class="btn btn-sm variant-ghost-surface hover:variant-filled-success"
@@ -126,7 +135,7 @@ if (browser) {
 </section> -->
 
 
-<section class="main_content container p-1 pb-28">
+<section class="main_content flex-grow px-1 md:px-2 pb-28 overflow-auto">
     {@render children()}
 </section>
 
diff --git a/src/routes/journals/+page.svelte b/src/routes/journals/+page.svelte
index 985ba78c..b494f5b1 100644
--- a/src/routes/journals/+page.svelte
+++ b/src/routes/journals/+page.svelte
@@ -141,7 +141,19 @@ async function create_journal() {
 
 
 <!-- Svelte Page for a AE Journals Module main page -->
-<section class="ae_journals md:container h-full mx-auto space-y-2">
+<section
+    class="
+    ae_journals
+    mx-auto
+    flex flex-col gap-1
+    items-center
+    min-h-full
+    max-h-max
+    min-w-full
+    max-w-max
+    space-y-2
+    "
+    >
 
 <h1 class="h1 text-center">
     <!-- <Library size="1em" class="mx-1 inline-block" /> -->
diff --git a/src/routes/journals/[journal_id]/+layout.svelte b/src/routes/journals/[journal_id]/+layout.svelte
index e759f559..8350049f 100644
--- a/src/routes/journals/[journal_id]/+layout.svelte
+++ b/src/routes/journals/[journal_id]/+layout.svelte
@@ -101,12 +101,14 @@ async function handle_update_journal() {
 <section
     class="
         ae_journals__journal
-        h-full mx-auto
-        flex flex-col
-        gap-1
+        mx-auto
+        flex flex-col flex-grow gap-1
         items-center
+        min-h-full
+        max-h-max
         min-w-full
         max-w-max
+        space-y-2
         "
     >
 
@@ -117,7 +119,6 @@ async function handle_update_journal() {
         gap-1
         items-center justify-between
         border-gray-400
-        border-t-2
         border-b
         py-2
         w-full
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 df1a93ee..dd3906e9 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
@@ -80,11 +80,14 @@ let lq__journal_entry_obj = $derived(liveQuery(async () => {
 <section
     class="
         ae_journals__journal_entry
-        h-full mx-auto
-        flex flex-col gap-1
+        mx-auto
+        flex flex-col flex-grow gap-1
         items-center
+        min-h-full
+        max-h-max
         min-w-full
         max-w-max
+        space-y-2
         "
     >
 
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 b2741283..85ffdd56 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
@@ -73,7 +73,7 @@ $effect(() => {
 </script>
 
 
-<section class="svelte_component ae_section ae_view journal_entry_obj view__journal_entry_obj bg-white flex flex-col items-center justify-center rounded-lg w-full p-2 m-2 space-y-2" bind:clientHeight={$ae_loc.iframe_height_modal_body}>
+<section class="svelte_component ae_section ae_view journal_entry_obj view__journal_entry_obj bg-white flex flex-col flex-grow items-center justify-center rounded-lg w-full h-full p-2 m-2 space-y-2" bind:clientHeight={$ae_loc.iframe_height_modal_body}>
 
 {#if $lq__journal_entry_obj}
 <header class="ae_header journal_entry__header flex flex-row flex-wrap gap-2 items-center justify-between w-full">
@@ -203,7 +203,7 @@ $effect(() => {
         <button
             type="button"
             onclick={async () => {
-                const element = document.getElementById('rendered_journal_entry_content');
+                const element = document.getElementById(`rendered_journal_entry_content_${$lq__journal_entry_obj?.journal_entry_id}`);
                 if (!element) {
                     console.error('Element not found: rendered_journal_entry_content');
                     alert('Failed to copy rich content.');
@@ -407,7 +407,7 @@ $effect(() => {
 </header>
 
     <div
-        class="flex flex-row flex-wrap gap-1 items-center justify-evenly w-full max-w-sm"
+        class="flex flex-row flex-wrap gap-1 items-center justify-evenly w-full max-w-sm "
         >
         <!-- Entry alert status -->
         <button
@@ -728,16 +728,16 @@ $effect(() => {
     class:hidden={!$ae_loc.trusted_access || $journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id]}
     class="w-full font-mono shadow-md rounded-lg border-gray-500 bg-gray-100 p-2"
     >
-<article
-    class="prose"
-    id="rendered_journal_entry_content">
-{@html $lq__journal_entry_obj?.content_md_html}
-</article>
-<!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
+    <article
+        class="prose"
+        id="rendered_journal_entry_content_{$lq__journal_entry_obj?.journal_entry_id}">
+    {@html $lq__journal_entry_obj?.content_md_html}
+    </article>
+    <!-- {@html marked.parse($lq__journal_entry_obj?.content)} -->
 </div>
 
 <div
-    class="flex flex-col items-center justify-center w-full max-w-6xl"
+    class="flex-grow flex flex-col items-center justify-center w-full max-w-6xl"
     class:hidden={!$journals_loc.entry.edit_kv[$lq__journal_entry_obj?.journal_entry_id] && $lq__journal_entry_obj?.content?.length}
     >
 
@@ -751,7 +751,7 @@ $effect(() => {
         }
     }}
     class:bg-orange-100={$ae_loc.edit_mode}
-    class="w-full min-h-10 h-96 p-2 border border-gray-300 rounded-lg"
+    class="flex-grow w-full min-h-10 h-full p-2 border border-gray-300 rounded-lg"
     placeholder="Edit journal entry content here..."
     ></textarea>