From 1b1a8ee9142c9eaead21a77bbb4e0998e29bd958 Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Thu, 5 Nov 2026 22:05:31 -0600 Subject: [PATCH 01/11] Add hide-sm and wrap helpers; limit hover styles to pointer devices --- frontend/src/app.css | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/frontend/src/app.css b/frontend/src/app.css index ffb7968..c0aa0be 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -149,6 +149,11 @@ legend { padding: 0; } clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } +/* Phones: drop a button's text label to save room, but keep it for screen readers. */ +@media (max-width: 420px) { + .hide-sm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } +} + /* ---------- Layout helpers ---------- */ .stack { display: flex; flex-direction: column; gap: var(--s3); } .stack-lg { display: flex; flex-direction: column; gap: var(--s5); } @@ -191,20 +196,25 @@ button, .btn { transform var(--dur-out) var(--ease), box-shadow var(--dur) var(--ease); -webkit-tap-highlight-color: transparent; } -button:hover:not(:disabled), .btn:hover { background: var(--surface-2); } +/* Hover only where a pointer hovers; on phones it would stick after a tap. */ +@media (hover: hover) { + button:hover:not(:disabled), .btn:hover { background: var(--surface-2); } + button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } + button.ghost:hover:not(:disabled), .btn.ghost:hover { background: var(--surface-2); } +} button:active:not(:disabled), .btn:active { transform: scale(0.97); } button:disabled { opacity: 0.45; cursor: not-allowed; } button.primary, .btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-1); } -button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } button.danger.solid { background: var(--danger); color: var(--surface); border-color: var(--danger); } button.ghost, .btn.ghost { background: transparent; border-color: transparent; } -button.ghost:hover:not(:disabled), .btn.ghost:hover { background: var(--surface-2); } /* .sm is visually compact but keeps the full 44px tap target */ button.sm, .btn.sm { min-height: 44px; padding: 0 var(--s3); font-size: var(--fs-sm); border-radius: var(--r-sm); } button.lg, .btn.lg { min-height: 56px; padding: 0 var(--s5); font-size: var(--fs-md); border-radius: var(--r-lg); } button.block, .btn.block { width: 100%; } button.icon { padding: 0; width: 44px; } +/* Labels that can be long (user-named calendars, time zones) wrap instead of overflowing the screen. */ +button.wrap, .btn.wrap { white-space: normal; text-align: center; padding-block: var(--s2); } button[aria-pressed='true'] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-text); } /* ---------- Forms ---------- */ -- 2.34.1 From 9aa87ad54455fb3a09b02c44d7cb8799d51af791 Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Thu, 5 Nov 2026 22:05:31 -0600 Subject: [PATCH 02/11] Tag theme-color metas with the theme they belong to --- frontend/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 8a9d175..06dae0b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,8 +5,8 @@ ParentCalendar - - + + -- 2.34.1 From 4141a413aa061850723dcad096352d415d1922d5 Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Thu, 5 Nov 2026 22:05:32 -0600 Subject: [PATCH 03/11] Make the status bar follow a theme pinned in Settings --- frontend/src/lib/state.svelte.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/frontend/src/lib/state.svelte.ts b/frontend/src/lib/state.svelte.ts index 11e9593..62e0f8d 100644 --- a/frontend/src/lib/state.svelte.ts +++ b/frontend/src/lib/state.svelte.ts @@ -52,4 +52,12 @@ export function setTheme(t: Theme) { } catch {} if (t === 'system') delete document.documentElement.dataset.theme; else document.documentElement.dataset.theme = t; + syncThemeColor(t); } +// The status bar and browser chrome follow a theme pinned in Settings, not only the device's mode. +function syncThemeColor(t: Theme) { + document.querySelectorAll('meta[name="theme-color"]').forEach((m) => { + m.media = t === 'system' ? `(prefers-color-scheme: ${m.dataset.for})` : t === m.dataset.for ? 'all' : 'not all'; + }); +} +syncThemeColor(getTheme()); -- 2.34.1 From d573ce24098a642f384a789af822728884435088 Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Thu, 5 Nov 2026 22:05:32 -0600 Subject: [PATCH 04/11] Keep toasts above the Publish bar and clear the landscape notch --- frontend/src/App.svelte | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index f9ec111..fd34e77 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -91,7 +91,8 @@ main { max-width: 1120px; margin: 0 auto; - padding: var(--s5) var(--gutter) calc(var(--nav-h) + var(--s6) + env(safe-area-inset-bottom)); + padding: var(--s5) max(var(--gutter), env(safe-area-inset-right)) calc(var(--nav-h) + var(--s6) + env(safe-area-inset-bottom)) + max(var(--gutter), env(safe-area-inset-left)); /* landscape notch */ outline: none; } @@ -116,7 +117,7 @@ display: grid; place-items: center; width: 56px; height: 30px; border-radius: var(--r-full); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } - nav a:hover .pill { background: var(--surface-2); } + @media (hover: hover) { nav a:hover .pill { background: var(--surface-2); } } nav a[aria-current='page'] { color: var(--primary-text); } nav a[aria-current='page'] .pill { background: var(--primary-soft); } nav a:focus-visible { outline: none; } @@ -141,6 +142,9 @@ width: max-content; max-width: calc(100vw - 2 * var(--gutter)); } @media (min-width: 1024px) { .toast-region { bottom: var(--s5); } } + /* On the review screen, sit above the sticky Publish bar instead of covering it. */ + :global(body:has(.publish-bar)) .toast-region { bottom: calc(var(--nav-h) + 88px + env(safe-area-inset-bottom)); } + @media (min-width: 1024px) { :global(body:has(.publish-bar)) .toast-region { bottom: 96px; } } .toast { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--r-md); -- 2.34.1 From 08a175cc6a61cdf43dc5a4273c1659a4fe2e3664 Mon Sep 17 00:00:00 2001 From: iamdoubz <> Date: Thu, 5 Nov 2026 22:05:32 -0600 Subject: [PATCH 05/11] Move scan status under the name so names aren't truncated --- frontend/src/routes/Home.svelte | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte index c53d052..066a1e1 100644 --- a/frontend/src/routes/Home.svelte +++ b/frontend/src/routes/Home.svelte @@ -94,9 +94,11 @@ {s.source_name} - {monthLabel(s.hint_month)} · {s.event_count} {s.event_count === 1 ? 'event' : 'events'} + + + {monthLabel(s.hint_month)} · {s.event_count} {s.event_count === 1 ? 'event' : 'events'} + -