feat: Enhance notification model and UI components

- Added an `updated_at` timestamp field to the Notification model for better tracking of notification updates.
- Updated the NotificationButton component to change the unread notification badge color for improved visibility.
- Adjusted the NotificationPopup component's layout and text handling for better responsiveness and readability.

surfsense_backend/app/db.py

@@ -728,6 +728,13 @@ class Notification(BaseModel, TimestampMixin):
         Boolean, nullable=False, default=False, server_default=text("false"), index=True
     )
     notification_metadata = Column("metadata", JSONB, nullable=True, default={})
+    updated_at = Column(
+        TIMESTAMP(timezone=True),
+        nullable=True,
+        default=lambda: datetime.now(UTC),
+        onupdate=lambda: datetime.now(UTC),
+        index=True,
+    )
 
     user = relationship("User", back_populates="notifications")
     search_space = relationship("SearchSpace", back_populates="notifications")

surfsense_web/components/notifications/NotificationButton.tsx

@@ -25,11 +25,11 @@ export function NotificationButton() {
 							<Bell className="h-4 w-4" />
 							{unreadCount > 0 && (
 								<span
-									className={cn(
+								className={cn(
-										"absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground",
+									"absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-black text-[10px] font-medium text-white dark:bg-zinc-800 dark:text-zinc-50",
-										unreadCount > 9 && "px-1"
+									unreadCount > 9 && "px-1"
-									)}
+								)}
-								>
+							>
 									{unreadCount > 99 ? "99+" : unreadCount}
 								</span>
 							)}

surfsense_web/components/notifications/NotificationPopup.tsx

@@ -55,7 +55,7 @@ export function NotificationPopup({
 	};
 
 	return (
-		<div className="flex flex-col">
+		<div className="flex flex-col w-80 max-w-[calc(100vw-2rem)]">
 			{/* Header */}
 			<div className="flex items-center justify-between px-4 py-3 border-b">
 				<div className="flex items-center gap-2">
@@ -92,20 +92,20 @@ export function NotificationPopup({
 										!notification.read && "bg-accent/50"
 									)}
 								>
-									<div className="flex items-start gap-3">
+									<div className="flex items-start gap-3 overflow-hidden">
 										<div className="flex-shrink-0 mt-0.5">{getStatusIcon(notification)}</div>
-										<div className="flex-1 min-w-0">
+										<div className="flex-1 min-w-0 overflow-hidden">
 											<div className="flex items-start justify-between gap-2 mb-1">
 												<p
 													className={cn(
-														"text-xs font-medium break-words",
+														"text-xs font-medium break-all",
 														!notification.read && "font-semibold"
 													)}
 												>
 													{notification.title}
 												</p>
 											</div>
-											<p className="text-[11px] text-muted-foreground break-words line-clamp-2">
+											<p className="text-[11px] text-muted-foreground break-all line-clamp-2">
 												{notification.message}
 											</p>
 											<div className="flex items-center justify-between mt-2">