feat: make notification center mobile friendly

- Use useMobileViewport to detect mobile and position dropdown
  centered with left/right margins instead of right-aligned, which
  caused overflow on small screens.
- Add a semi-transparent backdrop overlay on mobile so tapping
  outside the dropdown naturally closes it.
- Update mobile CSS: notification-dropdown fills screen width
  with 0.75rem margins, max-height capped at 70vh for reachability.
- Remove the 360px max-width cap on mobile so the dropdown uses
  available screen space properly.

Quality gates: tsc --noEmit (pass), build (pass)

apps/web/src/styles.css

@@ -4838,9 +4838,20 @@ a:active,
 }
 
 @media (max-width: 767px) {
+	.notification-dropdown-backdrop {
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.35);
+		z-index: 9998;
+	}
+
 	.notification-dropdown {
-		width: calc(100vw - 2rem);
-		max-width: 360px;
+		width: auto;
+		left: 0.75rem;
+		right: 0.75rem;
+		max-width: none;
+		border-radius: 12px;
+		max-height: 70vh;
 	}
 }