diff --git a/package.json b/package.json index 8aa031c..7501b2b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tallynote", - "version": "1.2.7", + "version": "1.2.8", "private": true, "type": "module", "packageManager": "pnpm@9.0.6", diff --git a/web-next/src/main.tsx b/web-next/src/main.tsx index 8845c93..23499de 100644 --- a/web-next/src/main.tsx +++ b/web-next/src/main.tsx @@ -32,9 +32,9 @@ function App() { const logoutInFlight = useRef(false); useDialogAccessibility(); const notify = useCallback((message: string, kind: "success" | "error" | "info" = "info") => { - // The placement container owns the responsive right inset. Keeping the - // item offset at zero avoids pushing narrow-screen notices off canvas. - const options = { content: message, duration: 4200, placement: "top-right" as const, offset: [24, 76] as [number, number], zIndex: 6000 }; + // Keep notices in the lower-right safe area so they do not compete with + // the header controls or obscure the page title. + const options = { content: message, duration: 4200, placement: "bottom-right" as const, offset: [24, 24] as [number, number], zIndex: 6000 }; const show = kind === "success" ? NotificationPlugin.success : kind === "error" ? NotificationPlugin.error : NotificationPlugin.info; void show(options); }, []); diff --git a/web-next/src/styles/theme.css b/web-next/src/styles/theme.css index db2fb5c..9b088d5 100644 --- a/web-next/src/styles/theme.css +++ b/web-next/src/styles/theme.css @@ -115,14 +115,14 @@ input:focus-visible, textarea:focus-visible, select:focus-visible { box-sizing: border-box !important; transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; } -.t-notification__show--top-right { - top: 76px !important; +.t-notification__show--bottom-right { + bottom: 24px !important; right: 24px !important; z-index: 6000 !important; } @media (max-width: 768px) { - .t-notification__show--top-right { - top: 16px !important; + .t-notification__show--bottom-right { + bottom: 16px !important; right: 16px !important; left: 16px !important; width: auto !important;