💄 Optimize the notification overlay styling

lib/widgets/notification_item.dart

@@ -8,12 +8,12 @@ import 'package:material_symbols_icons/material_symbols_icons.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 
+const double kNotificationBorderRadius = 8;
+
 class NotificationItemWidget extends HookConsumerWidget {
   final NotificationItem item;
   final VoidCallback onDismiss;
   final bool isDesktop;
-  final int index;
-  final int totalNotifications;
   final Animation<double> progress;
 
   const NotificationItemWidget({
@@ -21,8 +21,6 @@ class NotificationItemWidget extends HookConsumerWidget {
     required this.item,
     required this.onDismiss,
     required this.isDesktop,
-    required this.index,
-    required this.totalNotifications,
     required this.progress,
   });
 
@@ -56,14 +54,18 @@ class NotificationItemWidget extends HookConsumerWidget {
               }
             }
           : null,
+      child: ConstrainedBox(
+        constraints: const BoxConstraints(maxWidth: double.infinity),
         child: Stack(
           children: [
             Card(
-            elevation: (index == 0 && !isDesktop && totalNotifications > 1) ? 8 : 4,
+              elevation: 4,
               margin: EdgeInsets.zero,
               color: Theme.of(context).colorScheme.surfaceContainerHigh,
-            shape: const RoundedRectangleBorder(
-              borderRadius: BorderRadius.all(Radius.circular(8)),
+              shape: RoundedRectangleBorder(
+                borderRadius: const BorderRadius.all(
+                  Radius.circular(kNotificationBorderRadius),
+                ),
               ),
               child: Column(
                 mainAxisSize: MainAxisSize.min,
@@ -124,7 +126,7 @@ class NotificationItemWidget extends HookConsumerWidget {
                     ),
                   ),
                 ],
-            ).clipRRect(all: 8),
+              ),
             ),
             Positioned(
               top: 4,
@@ -141,6 +143,7 @@ class NotificationItemWidget extends HookConsumerWidget {
               ),
             ),
           ],
+        ).clipRRect(all: kNotificationBorderRadius),
       ),
     );
   }

lib/widgets/notification_overlay.dart

@@ -38,18 +38,17 @@ class NotificationOverlay extends HookConsumerWidget {
         child: Material(
           color: Colors.transparent,
           child: Column(
+            spacing: 8,
             mainAxisAlignment: MainAxisAlignment.start,
             crossAxisAlignment: CrossAxisAlignment.end,
             mainAxisSize: MainAxisSize.min,
             children: notifications.asMap().entries.map((entry) {
-              final index = entry.key;
               final item = entry.value;
               return AnimatedNotificationItem(
                 key: Key(item.id),
                 item: item,
                 isDesktop: true,
-                index: index,
-                totalNotifications: notifications.length,
+                margin: EdgeInsets.symmetric(horizontal: 16),
                 onDismiss: () {
                   ref.read(notificationStateProvider.notifier).dismiss(item.id);
                 },
@@ -60,10 +59,7 @@ class NotificationOverlay extends HookConsumerWidget {
       );
     } else {
       // Non-desktop: use Stack with overlapping
-      const double notificationHeight = 80.0;
       const double overlap = 20.0;
-      final stackHeight =
-          notificationHeight + (notifications.length - 1) * overlap;
 
       return Positioned(
         top: topOffset,
@@ -72,7 +68,7 @@ class NotificationOverlay extends HookConsumerWidget {
         child: Material(
           color: Colors.transparent,
           child: SizedBox(
-            height: stackHeight,
+            height: MediaQuery.sizeOf(context).height,
             child: Stack(
               alignment: Alignment.topCenter,
               children: notifications.asMap().entries.map((entry) {
@@ -82,18 +78,23 @@ class NotificationOverlay extends HookConsumerWidget {
                   top: index * overlap,
                   left: 16,
                   right: 16,
+                  child: Container(
+                    decoration: BoxDecoration(
+                      boxShadow: [
+                        BoxShadow(color: Colors.black54, blurRadius: 4.0 + index * 2.0),
+                      ],
+                    ),
                     child: AnimatedNotificationItem(
                       key: Key(item.id),
                       item: item,
                       isDesktop: false,
-                    index: index,
-                    totalNotifications: notifications.length,
                       onDismiss: () {
                         ref
                             .read(notificationStateProvider.notifier)
                             .dismiss(item.id);
                       },
-                  ).clipRRect(all: 8),
+                    ),
+                  ),
                 );
               }).toList(),
             ),
@@ -108,16 +109,14 @@ class AnimatedNotificationItem extends HookConsumerWidget {
   final NotificationItem item;
   final VoidCallback onDismiss;
   final bool isDesktop;
-  final int index;
-  final int totalNotifications;
+  final EdgeInsets? margin;
 
   const AnimatedNotificationItem({
     super.key,
     required this.item,
     required this.onDismiss,
     required this.isDesktop,
-    required this.index,
-    required this.totalNotifications,
+    this.margin,
   });
 
   @override
@@ -163,15 +162,16 @@ class AnimatedNotificationItem extends HookConsumerWidget {
       child: SizeTransition(
         sizeFactor: curvedAnimation,
         axis: Axis.vertical,
+        child: Padding(
+          padding: margin ?? EdgeInsets.zero,
           child: NotificationItemWidget(
             item: item,
             isDesktop: isDesktop,
-          index: index,
-          totalNotifications: totalNotifications,
             onDismiss: onDismiss,
             progress: progressAnimation,
           ),
         ),
+      ),
     );
   }
 }