fix: keep toasts above the Save and Cancel buttons of the contact and group forms

components/contacts/__tests__/contact-form.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { ContactForm } from '../contact-form';
+import { ContactGroupForm } from '../contact-group-form';
 import type { ContactCard, ContactMedia } from '@/lib/jmap/types';
 import { useAuthStore } from '@/stores/auth-store';
 import { findContactPhotoEntry } from '@/stores/contact-store';
@@ -106,6 +107,23 @@ describe('ContactForm', () => {
     expect(onDirtyChange).toHaveBeenLastCalledWith(true);
   });
 
+  it.each([
+    ['contact form', () => <ContactForm onSave={vi.fn()} onCancel={vi.fn()} />],
+    ['group form', () => <ContactGroupForm individuals={[]} onSave={vi.fn()} onCancel={vi.fn()} />],
+  ])('keeps toasts off the %s footer by registering it as a bottom bar', (_name, form) => {
+    const rect = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(
+      () => ({ left: 0, top: window.innerHeight - 72, width: 600, height: 72, right: 600, bottom: window.innerHeight, x: 0, y: 0, toJSON: () => ({}) }) as DOMRect,
+    );
+    try {
+      const { unmount } = render(form());
+      expect(document.documentElement.style.getPropertyValue('--bottom-controls-height')).toBe('72px');
+      unmount();
+      expect(document.documentElement.style.getPropertyValue('--bottom-controls-height')).toBe('');
+    } finally {
+      rect.mockRestore();
+    }
+  });
+
   describe('photos (P0-3)', () => {
     // The same PHOTO as ContactCard/get returns it on each version.
     const photo0_16_23: ContactMedia = { kind: 'photo', uri: 'data:image/jpeg;base64,/9j/', mediaType: 'image/jpeg' };

components/contacts/contact-form.tsx

@@ -10,6 +10,7 @@ import { Avatar } from "@/components/ui/avatar";
 import { findContactPhotoEntry, getContactPhotoRef, type ContactPhotoRef } from "@/stores/contact-store";
 import type { ContactSaveOptions } from "@/lib/contact-media";
 import { cn } from "@/lib/utils";
+import { useBottomControls } from "@/hooks/use-bottom-controls";
 import type { ContactCard, ContactOnlineService, ContactAnniversary, ContactPersonalInfo, AddressBook, AnniversaryDate, PartialDate, ContactAddress, ContactMedia } from "@/lib/jmap/types";
 
 interface EmailEntry {
@@ -463,6 +464,7 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
   const [initialFields] = useState(fields);
   const dirty = fields !== initialFields || photoEdit.kind !== "unchanged";
   useEffect(() => { onDirtyChange?.(dirty); }, [dirty, onDirtyChange]);
+  const footerRef = useBottomControls();
 
   const handlePhotoSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -1194,7 +1196,8 @@ export function ContactForm({ contact, addressBooks, allKeywords, defaultAddress
         </div>
       </div>
 
-      <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border flex-shrink-0">
+      {/* Toasts sit above Save and Cancel, not on them. */}
+      <div ref={footerRef} className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border flex-shrink-0">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSaving}>
           {t("cancel")}
         </Button>

components/contacts/contact-group-form.tsx

@@ -7,6 +7,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Avatar } from "@/components/ui/avatar";
 import { cn } from "@/lib/utils";
+import { useBottomControls } from "@/hooks/use-bottom-controls";
 import type { ContactCard } from "@/lib/jmap/types";
 import { getContactDisplayName, getContactPrimaryEmail } from "@/stores/contact-store";
 
@@ -44,6 +45,7 @@ export function ContactGroupForm({
   const [initial] = useState(() => ({ name, members: [...selectedIds].sort().join(",") }));
   const dirty = name !== initial.name || [...selectedIds].sort().join(",") !== initial.members;
   useEffect(() => { onDirtyChange?.(dirty); }, [dirty, onDirtyChange]);
+  const footerRef = useBottomControls();
 
   const filteredIndividuals = useMemo(() => {
     if (!memberSearch) return individuals;
@@ -195,7 +197,8 @@ export function ContactGroupForm({
         )}
       </div>
 
-      <div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
+      {/* Toasts sit above Save and Cancel, not on them. */}
+      <div ref={footerRef} className="flex items-center justify-end gap-2 px-6 py-4 border-t border-border">
         <Button type="button" variant="outline" onClick={onCancel} disabled={isSaving}>
           {t("form.cancel")}
         </Button>

components/ui/__tests__/toast-layout.test.tsx

@@ -41,6 +41,13 @@ describe('toast layout', () => {
     expect(container).toHaveClass('[html[data-composer-open]_&]:bottom-20');
   });
 
+  it('sits above a registered bottom bar on the desktop too, such as a form footer', () => {
+    render(<Toasts />);
+    const container = screen.getByRole('status');
+    expect(container).toHaveClass('bottom-[max(1.25rem,calc(var(--bottom-controls-height,0px)+0.75rem))]');
+    expect(container).not.toHaveClass('bottom-5');
+  });
+
   it('names the close button and hides it on a phone', () => {
     render(<Toasts />);
     act(() => { toast.success('Saved'); });

components/ui/toast.tsx

@@ -317,8 +317,9 @@ export function ToastContainer({ toasts, onClose }: { toasts: Toast[]; onClose:
     <div
       className={cn(
         // Newest at the bottom, at the end corner (bottom left in RTL);
-        // lifted over an open composer's footer.
-        "fixed bottom-5 end-5 z-[99999] flex flex-col gap-2.5 [html[data-composer-open]_&]:bottom-20",
+        // lifted over a registered bottom bar (a form's Save/Cancel footer)
+        // and over an open composer's footer.
+        "fixed bottom-[max(1.25rem,calc(var(--bottom-controls-height,0px)+0.75rem))] end-5 z-[99999] flex flex-col gap-2.5 [html[data-composer-open]_&]:bottom-20",
         // Phone: full width with 12px margins, above the bottom controls
         // (the tab bar, or whichever bar registered with useBottomControls).
         "max-sm:inset-x-3 max-sm:bottom-[calc(var(--bottom-controls-height,3.75rem)+0.75rem)]",

hooks/use-bottom-controls.ts

@@ -3,8 +3,9 @@
 import { useEffect, useState } from 'react';
 
 /**
- * Bars pinned to the bottom of the screen on a phone (the tab bar, a
- * viewer's action bar) register here. While any is on screen,
+ * Bars pinned to the bottom of the screen register here: on a phone the tab
+ * bar and a viewer's action bar, on any screen an editor's Save/Cancel
+ * footer. While any is on screen,
  * `--bottom-controls-height` on <html> says how far from the bottom of the
  * window the topmost of them reaches, and toasts sit above it.
  */