Mostly style improvements for mobile sized

This commit is contained in:
Scott Idem
2025-09-03 16:19:54 -04:00
parent 7364ce5527
commit 66510c8ff1
2 changed files with 45 additions and 14 deletions

View File

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