IO-3166-Global-Notifications-Part-2 - Checkpoint

client/src/components/notification-center/notification-center.styles.scss

@@ -11,7 +11,7 @@
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.06);
   z-index: 1000;
   display: none;
-  overflow-x: hidden; /* Prevent horizontal overflow */
+  overflow-x: hidden;
 
   &.visible {
     display: block;
@@ -67,12 +67,17 @@
   }
 
   .notification-item {
-    padding: 8px 16px;
+    padding: 12px 16px; // Increased padding from 8px to 12px for more space
     border-bottom: 1px solid #f0f0f0;
     display: block;
     overflow: visible;
     width: 100%;
     box-sizing: border-box;
+    cursor: pointer; // Add pointer cursor to indicate clickability
+
+    &:hover {
+      background: #fafafa; // Optional: Add hover effect for better UX
+    }
 
     .notification-content {
       width: 100%;
@@ -122,7 +127,7 @@
   }
 
   .ant-badge {
-    width: 100%; /* Ensure Badge takes full width to allow .notification-title to stretch properly */
+    width: 100%;
   }
 
   .ant-alert {