style: refine toast notification UI for mobile responsiveness

This commit is contained in:
idevakk
2026-03-06 03:23:53 +05:30
parent 5eb2c3b41f
commit 99ecfa9a53

View File

@@ -40,7 +40,7 @@
{{ $slot }}
<!-- Global Toast Notifications -->
<div class="fixed bottom-6 right-6 z-[100] flex flex-col gap-3 pointer-events-none">
<div class="fixed bottom-6 left-6 right-6 sm:left-auto sm:right-6 z-[100] flex flex-col gap-3 pointer-events-none">
<template x-for="toast in toasts" :key="toast.id">
<div x-show="true"
x-transition:enter="transition ease-out duration-500"
@@ -49,7 +49,7 @@
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100 scale-100"
x-transition:leave-end="opacity-0 scale-90"
class="pointer-events-auto min-w-[320px] p-4 rounded-2xl border backdrop-blur-xl shadow-2xl flex items-center gap-4 relative overflow-hidden group"
class="pointer-events-auto w-full sm:min-w-[320px] p-4 rounded-2xl border backdrop-blur-xl shadow-2xl flex items-center gap-4 relative overflow-hidden group"
:class="{
'bg-emerald-500/10 border-emerald-500/20 text-emerald-100': toast.type === 'success',
'bg-blue-500/10 border-blue-500/20 text-blue-100': toast.type === 'info',