Responsive Toast Positioning

[BrayanMQ]

Description

Currently, toast notifications (Sonner) appear at the bottom of the screen by default. On mobile devices, this position is problematic because it overlaps and obstructs the bottom navigation bar (navbottom), hindering user interaction. In desktop environments, the bottom-right corner is the preferred position for visibility and standard UX.

Proposed Solution

Modify the Toaster component in components/ui/sonner.tsx to handle responsive positioning:

• Mobile (≤ 768px): Position toasts at the top-right (or top-center as requested) to avoid navbottom overlap.
• Desktop (> 768px): Position toasts at the bottom-right.

Tasks

• Implement screen size detection in Toaster component.
• Update sonner.tsx to use dynamic position prop based on viewport width.
• Test responsiveness by resizing the browser.