Style improvements for small screens

src/routes/journals/[journal_id]/+layout.svelte

@@ -131,7 +131,7 @@ async function handle_update_journal() {
             hover:variant-filled-tertiary
             transition
             "
-        title="View all journals"
+        title="View all journals for this account: {$ae_loc.account_name}"
         >
         <!-- <BookHeart /> -->
         <!-- <Library /> -->
@@ -151,6 +151,7 @@ async function handle_update_journal() {
             hover:variant-filled-tertiary
             transition
             "
+        title="View all journal entries for this journal: {$lq__journal_obj?.name}"
         >
         <Notebook />
         <!-- <Bookmark /> -->
@@ -183,7 +184,7 @@ async function handle_update_journal() {
             hover:variant-filled-warning
             transition
             "
-        title="Edit Journal meta and configuration (name, type, passcode, categories, etc.)"
+        title="Edit Journal meta and configuration (name, type, passcode, categories, etc.: {$lq__journal_obj?.name})"
         >
         <Pencil />
         <span class="hidden md:inline">
@@ -233,6 +234,7 @@ async function handle_update_journal() {
                 hover:variant-filled-secondary
                 transition
                 "
+            title="Create a new journal entry for this journal: {$lq__journal_obj?.name}"
             >
             <FilePlus />
             <!-- <span class="fas fa-plus m-1"></span> -->

src/routes/journals/ae_comp__journal_entry_obj_id_view.svelte

@@ -76,8 +76,9 @@ $effect(() => {
 <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}>
 
 {#if $lq__journal_entry_obj}
-<header class="ae_header journal_entry__header flex flex-row gap-2 items-center justify-between w-full">
-    <span class="flex flex-row gap-2 items-center justify-start">
+<header class="ae_header journal_entry__header flex flex-row flex-wrap gap-2 items-center justify-between w-full">
+
+    <div class="flex flex-row flex-wrap gap-2 items-center justify-start">
         <!-- Toggle edit for journal entry -->
         <button
             type="button"
@@ -127,7 +128,7 @@ $effect(() => {
             {/if}
         </button>
 
-        <h2 class="journal_entry__name h3">
+        <h2 class="journal_entry__name h4 md:h3">
 
             <!-- <span class="fas fa-spinner fa-spin"></span> -->
             <span class="journal_entry__name inline-block">
@@ -153,6 +154,7 @@ $effect(() => {
 
         </h2>
 
+        <span class="flex flex-row flex-wrap gap-2 items-center justify-start">
         <!-- Button to copy the Markdown version -->
         <button
             type="button"
@@ -270,7 +272,8 @@ $effect(() => {
             <Copy size="2em" />
             <span class="hidden md:inline">Clone</span>
         </button>
-    </span>
+        </span>
+    </div>
 
 
     <div class="flex flex-row flex-wrap gap-2 items-center justify-end">