From 66510c8ff11013517e2405196bb95694de4747f4 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Wed, 3 Sep 2025 16:19:54 -0400
Subject: [PATCH] Mostly style improvements for mobile sized

---
 .../ae_comp__journal_entry_obj_id_view.svelte | 31 ++++++++++++++-----
 .../ae_comp__journal_obj_id_view.svelte       | 28 +++++++++++++----
 2 files changed, 45 insertions(+), 14 deletions(-)

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 5aa43b33..a278ec1f 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
@@ -1288,12 +1288,13 @@ $effect(() => {
 
     </div>
 
-    <section class="relative">
+    <!-- <section class="relative"> -->
+     <section class="relative transition-all">
         <!-- Menu Button -->
         <button
             type="button"
             onclick={() => (show_menu = !show_menu)}
-            class="btn variant-outline-secondary hover:preset-filled-secondary-500 transition py-1 px-2 w-24 *:hover:inline"
+            class="btn variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 *:hover:inline transition-all"
             title="Toggle menu"
         >
             <Menu size="1.5em" class="inline-block" />
@@ -1301,17 +1302,31 @@ $effect(() => {
         </button>
 
         <!-- Menu -->
-        {#if show_menu}
+        <!-- {#if show_menu} -->
         <div
-            class="absolute top-12 right-0 bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 z-50 w-80 space-y-0.5 border border-gray-500"
+            class="
+                absolute top-12 right-0
+                p-4 z-50 w-80
+                space-y-0.5
+                bg-white dark:bg-gray-800
+                border border-gray-500
+                shadow-xl rounded-lg
+                min-w-72
+                max-w-fit
+                "
+            class:hidden={show_menu}
             >
 
-
             <!-- <div class="flex flex-row flex-wrap gap-1 items-center justify-end"> -->
 
                 <!-- Category code for journal entry -->
                 <!-- Give list of categories to base the new entry on -->
-                <div class="flex flex-row items-center justify-evenly gap-2 w-full">
+                <div
+                    class="
+                        flex flex-row items-center justify-evenly gap-2 w-full
+                        "
+                        >
+
                     <span class="text-sm text-gray-500 hidden sm:inline">
                         Category:
                     </span>
@@ -1482,7 +1497,7 @@ $effect(() => {
                 <!-- Toggle if entry should be used as a template entry (cloneable). Only visible in edit_mode. -->
                 <button
                     type="button"
-                    class:hidden={($lq__journal_obj.cfg_json?.hide_btn_template) || !$ae_loc.edit_mode}
+                    class:hidden={($lq__journal_obj?.cfg_json?.hide_btn_template) || !$ae_loc.edit_mode}
                     onclick={() => {
                         tmp_entry_obj.template = !$lq__journal_entry_obj?.template;
                         update_journal_entry();
@@ -1989,7 +2004,7 @@ $effect(() => {
             {/if}
 
         </div>
-        {/if}
+        <!-- {/if} -->
 
     </section>
 
diff --git a/src/routes/journals/ae_comp__journal_obj_id_view.svelte b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
index 66a7fa52..b7548fa1 100644
--- a/src/routes/journals/ae_comp__journal_obj_id_view.svelte
+++ b/src/routes/journals/ae_comp__journal_obj_id_view.svelte
@@ -115,13 +115,14 @@ function verify_journal_passcode() {
     </h2>
 
 
+<div class="grow flex flex-row flex-wrap gap-2 items-center justify-end">
 
-    <section class="relative">
+    <section class="relative transition-all">
         <!-- Menu Button -->
         <button
             type="button"
             onclick={() => (show_menu = !show_menu)}
-            class="btn variant-outline-secondary hover:preset-filled-secondary-500 transition py-1 px-2 w-24 *:hover:inline"
+            class="btn variant-outline-secondary hover:preset-filled-secondary-500 py-1 px-2 w-24 *:hover:inline transition-all"
             title="Toggle menu"
         >
             <Menu size="1.5em" class="inline-block" />
@@ -129,11 +130,25 @@ function verify_journal_passcode() {
         </button>
 
         <!-- Menu -->
-        {#if show_menu}
+        <!-- {#if show_menu} -->
         <div
-            class="absolute top-12 right-0 bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 z-50 w-80 space-y-0.5 border border-gray-500"
+            class="
+                absolute top-12 right-0
+                p-4 z-50 w-80
+                space-y-0.5
+                bg-white dark:bg-gray-800
+                border border-gray-500
+                shadow-xl rounded-lg
+                min-w-72
+                max-w-fit
+                "
+            class:hidden={show_menu}
             >
-            <div class="flex flex-row flex-wrap gap-1 items-center justify-between">
+            <div
+                class="
+                    flex flex-row flex-wrap items-center justify-evenly gap-2 w-full
+                    "
+                >
 
             <span class="text-sm text-gray-500">
                 <span class="fas fa-info-circle text-blue-500"></span>
@@ -252,9 +267,10 @@ function verify_journal_passcode() {
 
 
         </div>
-        {/if}
+        <!-- {/if} -->
     </section>
 
+</div>
 
 </header>