style(alerts): full width, no transparency for mobile

This commit is contained in:
Sam Chau
2026-01-29 04:09:58 +10:30
parent e1da79257f
commit 284c44d108
2 changed files with 5 additions and 5 deletions

View File

@@ -19,12 +19,12 @@
// Style mapping
const styles = {
success:
'bg-green-50 border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800 dark:text-green-200',
'bg-green-50 border-green-200 text-green-800 dark:bg-green-950 dark:border-green-800 dark:text-green-200',
error:
'bg-red-50 border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800 dark:text-red-200',
'bg-red-50 border-red-200 text-red-800 dark:bg-red-950 dark:border-red-800 dark:text-red-200',
warning:
'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800 dark:text-yellow-200',
info: 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-800 dark:text-blue-200'
'bg-yellow-50 border-yellow-200 text-yellow-800 dark:bg-yellow-950 dark:border-yellow-800 dark:text-yellow-200',
info: 'bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200'
};
// Icon color mapping

View File

@@ -3,7 +3,7 @@
import Alert from './Alert.svelte';
</script>
<div class="pointer-events-none fixed top-4 right-4 z-50 flex flex-col gap-3">
<div class="pointer-events-none fixed top-4 left-4 right-4 z-50 mx-auto flex max-w-md flex-col gap-3 md:left-auto md:mx-0">
{#each $alertStore as alert (alert.id)}
<div class="pointer-events-auto">
<Alert id={alert.id} type={alert.type} message={alert.message} />