+ {/* Toasts sit above Save and Cancel, not on them. */}
+
diff --git a/components/ui/__tests__/toast-layout.test.tsx b/components/ui/__tests__/toast-layout.test.tsx
index 5fc4a8cb9..5068e33a2 100644
--- a/components/ui/__tests__/toast-layout.test.tsx
+++ b/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(
);
+ 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(
);
act(() => { toast.success('Saved'); });
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index d2e1b91af..5d43a493c 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -317,8 +317,9 @@ export function ToastContainer({ toasts, onClose }: { toasts: Toast[]; onClose:
says how far from the bottom of the
* window the topmost of them reaches, and toasts sit above it.
*/