style: refine toast notification UI for mobile responsiveness
This commit is contained in:
@@ -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',
|
||||
|
||||
Reference in New Issue
Block a user