[BLD-242] Dashboard: Fix Notification overflow, UI Improvements (#7985)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the UI of the notification components in the dashboard. It includes updates to layout, spacing, and styles, improving the overall user experience and visual consistency.

### Detailed summary
- Updated `PopoverContent` with new dimensions and layout.
- Enhanced `NotificationList` with improved tab spacing and structure.
- Adjusted styles for empty state messages in `InboxTab` and `ArchiveTab`.
- Modified `NotificationEntry` layout and added icons for better aesthetics.
- Changed button styles and interactions for improved usability.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **Style**
  * Refreshed Notifications panel: larger, rounded popover with improved spacing, overflow handling, and updated alignment.
  * Redesigned notification items: bell capsule indicator, clearer card-like layout, hover-revealed “Mark as read,” and an outline CTA with arrow icon.
  * Improved list layout: flexible, smoother scrolling, simplified tab styling, and refined spacing.
  * Enhanced empty states for Inbox and Archive with centered, card-style icon visuals.

* **Refactor**
  * Reorganized component layouts for consistency and responsiveness without changing behavior or public APIs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/components/notifications/notification-button.tsx

@@ -56,7 +56,8 @@ export function NotificationsButton(props: { accountId: string }) {
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       <PopoverContent
         align="end"
-        className="max-h-[90vh] min-h-[500px] w-[400px] max-w-md p-0"
+        sideOffset={8}
+        className="max-h-[90vh] min-h-[550px] w-[450px] max-w-md p-0 flex flex-col rounded-xl overflow-hidden"
       >
         <NotificationList {...manager} />
       </PopoverContent>

apps/dashboard/src/@/components/notifications/notification-entry.tsx

@@ -7,7 +7,7 @@ import {
   parseISO,
   subDays,
 } from "date-fns";
-import { ArchiveIcon } from "lucide-react";
+import { ArchiveIcon, ArrowUpRightIcon, BellIcon } from "lucide-react";
 import { useMemo } from "react";
 import type { Notification } from "@/api/notifications";
 import { Button } from "@/components/ui/button";
@@ -42,39 +42,48 @@ export function NotificationEntry({
   }, [notification.createdAt]);
 
   return (
-    <div className="flex flex-row py-1.5">
-      {onMarkAsRead && (
-        <div className="min-h-full w-1 shrink-0 rounded-r-lg bg-primary" />
-      )}
-      <div className="flex w-full flex-row justify-between gap-2 border-b px-4 py-2 transition-colors last:border-b-0">
+    <div className="flex items-start gap-3 p-4 border-b group hover:bg-card last:border-b-0">
+      <div className="p-2.5 rounded-full border bg-card">
+        <BellIcon className="size-4 text-muted-foreground" />
+      </div>
+      <div className="flex w-full flex-row justify-between gap-2 transition-colors">
         <div className="flex items-start gap-3">
-          <div className="flex-1 space-y-1">
+          <div className="flex-1 space-y-1.5">
             <p className="text-sm">{notification.description}</p>
             {timeAgo && (
               <p className="text-muted-foreground text-xs">{timeAgo}</p>
             )}
-            <div className="flex flex-row justify-between gap-2 pt-1">
-              <Button asChild className="px-0" size="sm" variant="link">
+            <div className="flex flex-row justify-between gap-2 pt-2">
+              <Button
+                asChild
+                size="sm"
+                variant="outline"
+                className="rounded-full bg-card gap-2"
+              >
                 <a
                   href={notification.ctaUrl}
                   rel="noopener noreferrer"
                   target="_blank"
                 >
                   {notification.ctaText}
+                  <ArrowUpRightIcon className="size-4 text-muted-foreground" />
                 </a>
               </Button>
             </div>
           </div>
         </div>
         {onMarkAsRead && (
-          <Button
-            className="text-muted-foreground hover:text-foreground"
-            onClick={() => onMarkAsRead(notification.id)}
-            size="icon"
-            variant="ghost"
-          >
-            <ArchiveIcon className="h-4 w-4" />
-          </Button>
+          <div className="flex items-center">
+            <Button
+              className="p-2 h-auto opacity-0 group-hover:opacity-100 rounded-full text-muted-foreground hover:text-foreground"
+              onClick={() => onMarkAsRead(notification.id)}
+              size="sm"
+              variant="ghost"
+              aria-label="Archive notification"
+            >
+              <ArchiveIcon className="size-4" />
+            </Button>
+          </div>
         )}
       </div>
     </div>

apps/dashboard/src/@/components/notifications/notification-list.tsx

@@ -21,15 +21,15 @@ export function NotificationList(props: ReturnType<typeof useNotifications>) {
   const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   return (
-    <div className="flex w-full flex-1 flex-col">
+    <div className="flex flex-col overflow-hidden grow">
       <TabButtons
-        tabClassName="!text-sm hover:!bg-transparent !px-0 !py-1"
-        tabContainerClassName="space-x-6 px-4 pt-2"
+        tabClassName="hover:bg-transparent"
+        tabContainerClassName="pt-1.5 px-4"
         tabs={[
           {
             isActive: activeTab === "inbox",
             name: (
-              <div className="flex items-center gap-1">
+              <div className="flex items-center gap-2">
                 Inbox
                 {props.unreadNotificationsCount > 0 && (
                   <Badge variant="secondary">
@@ -49,7 +49,7 @@ export function NotificationList(props: ReturnType<typeof useNotifications>) {
       />
 
       <div
-        className="h-full w-full flex-1 overflow-y-auto"
+        className="flex-1 overflow-y-auto overscroll-contain flex flex-col grow"
         ref={scrollContainerRef}
       >
         {activeTab === "inbox" ? (
@@ -93,9 +93,9 @@ function InboxTab(
   },
 ) {
   return props.unreadNotifications.length === 0 ? (
-    <div className="flex h-full flex-col items-center justify-center gap-4 p-8 text-center">
-      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-        <BellIcon className="h-4 w-4 text-muted-foreground" />
+    <div className="flex grow flex-col items-center justify-center gap-4 p-4 text-center">
+      <div className="p-2 bg-card rounded-full border">
+        <BellIcon className="size-5 text-muted-foreground" />
       </div>
       <p className="text-muted-foreground text-sm">No new notifications</p>
     </div>
@@ -131,9 +131,9 @@ function ArchiveTab(
   },
 ) {
   return props.archivedNotifications.length === 0 ? (
-    <div className="flex flex-col items-center justify-center gap-4 p-8 text-center">
-      <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
-        <ArchiveIcon className="h-4 w-4 text-muted-foreground" />
+    <div className="flex grow flex-col items-center justify-center gap-4 p-4 text-center">
+      <div className="p-2 bg-card rounded-full border">
+        <ArchiveIcon className="size-5 text-muted-foreground" />
       </div>
       <p className="text-muted-foreground text-sm">No archived notifications</p>
     </div>