better masking and fix ui bug for live events

apps/dashboard/src/app/(auth)/live-events/live-events.tsx

@@ -2,7 +2,6 @@
 
 import { useState } from 'react';
 import { EventListItem } from '@/app/(app)/[organizationSlug]/[projectId]/events/event-list-item';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import useWS from '@/hooks/useWS';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -18,7 +17,7 @@ const LiveEvents = ({ events }: Props) => {
     setState((p) => [event, ...p].slice(0, 30));
   });
   return (
-    <ScrollArea className="h-screen">
+    <div className="hide-scrollbar h-screen overflow-y-auto">
       <div className="text-background-foreground py-16 text-center text-2xl font-bold">
         Real time data
         <br />
@@ -40,7 +39,7 @@ const LiveEvents = ({ events }: Props) => {
           ))}
         </div>
       </AnimatePresence>
-    </ScrollArea>
+    </div>
   );
 };
 

apps/dashboard/src/styles/globals.css

@@ -156,3 +156,13 @@
 .recharts-wrapper .recharts-cartesian-grid-horizontal line:last-child {
   stroke-opacity: 0;
 }
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.hide-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

packages/db/src/services/event.service.ts

@@ -138,8 +138,12 @@ interface GetEventsOptions {
 }
 
 function maskString(str: string, mask = '*') {
-  if (str.length < 9) return mask.repeat(Math.max(str.length, 3));
-  return str.slice(0, 3) + mask.repeat(str.length - 6) + str.slice(-3);
+  const allMasked = str.replace(/(\w)/g, mask);
+  if (str.length < 8) {
+    return allMasked;
+  }
+
+  return `${str.slice(0, 4)}${allMasked.slice(4)}`;
 }
 
 export function transformMinimalEvent(