Fix journal entry layout scrolling

This commit is contained in:
Scott Idem
2026-05-04 18:32:38 -04:00
parent c3a346cc9a
commit 7486150aab
4 changed files with 80 additions and 82 deletions

View File

@@ -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>