add: shadow and mobile config.

Author: ItzNotABug

src/lib/components/bottomModalAlert.svelte

@@ -490,6 +490,9 @@
 <style>
     .card {
         padding: 0.5rem;
+        box-shadow:
+            0 8px 16px 0 rgba(0, 0, 0, 0.02),
+            0 20px 24px 0 rgba(0, 0, 0, 0.02);
     }
 
     .main-alert-wrapper {

src/routes/(console)/bottomAlerts.ts

@@ -1,7 +1,11 @@
 import { isCloud } from '$lib/system';
 import { isSameDay } from '$lib/helpers/date';
 import Imagine from '$lib/components/promos/imagine.svelte';
-import { type BottomModalAlertItem, showBottomModalAlert } from '$lib/stores/bottom-alerts';
+import {
+    type BottomModalAlertItem,
+    setMobileSingleAlertLayout,
+    showBottomModalAlert
+} from '$lib/stores/bottom-alerts';
 
 const listOfPromotions: BottomModalAlertItem[] = [];
 
@@ -32,15 +36,21 @@ if (isCloud) {
             external: true,
             hideOnClick: true
         },
-        show: true,
-        sameContentOnMobileLayout: true
+        show: true
     };
 
     listOfPromotions.push(imaginePromo);
 }
 
 export function addBottomModalAlerts() {
     listOfPromotions.forEach((promotion) => showBottomModalAlert(promotion));
+
+    // only for imagine!
+    if (listOfPromotions.length > 0) {
+        const imaginePromo = listOfPromotions[0];
+        const { cta, title, message } = imaginePromo;
+        setMobileSingleAlertLayout({ enabled: true, cta, title, message });
+    }
 }
 
 // use this for time based promo handling