[Responsivity]: Toat is showing at the top on mobile by default

[art-santos]

PROBLEM:

The toast component doesn't have a clear position definition in the docs. Therefore the default behavior is to show it at the BOTTOM RIGHT corner. while it works fine on desktop, it doesn't work by default on mobile, demmanding an non intuitive TAILWIND CSS change.

SCREENSHOTS: MOBILE DESKTOP

[tushar1998]

Yes this behaviour is by default if you want to change adjust the classNames accordingly in toast.tsx > ToastViewport component

[sawaYch]

You may update the tailwind classes of toastVariants in Toast component: e.g. the toast pop from bottom in mobile view data-[state=open]:slide-in-from-bottom-full

const toastVariants = cva(
  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-bottom-full data-[state=open]:sm:slide-in-from-bottom-full',
  {
    variants: {
      variant: {
        default: 'border bg-background text-foreground',
        destructive:
          'destructive group border-destructive bg-destructive text-destructive-foreground',
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
);

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.