fix: move notifications to bottom right

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",

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
+    // Keep notices in the lower-right safe area so they do not compete with
-    // item offset at zero avoids pushing narrow-screen notices off canvas.
+    // the header controls or obscure the page title.
-    const options = { content: message, duration: 4200, placement: "top-right" as const, offset: [24, 76] as [number, number], zIndex: 6000 };
+    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);
   }, []);

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 {
+.t-notification__show--bottom-right {
-  top: 76px !important;
+  bottom: 24px !important;
   right: 24px !important;
   z-index: 6000 !important;
 }
 @media (max-width: 768px) {
-  .t-notification__show--top-right {
+  .t-notification__show--bottom-right {
-    top: 16px !important;
+    bottom: 16px !important;
     right: 16px !important;
     left: 16px !important;
     width: auto !important;