some changes for the tailwind classes and turned the rule for custom classes off

pkgs/ui/.eslintrc.json

@@ -1,10 +1,19 @@
 {
   "root": true,
-  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended",  "plugin:@typescript-eslint/recommended"],
+  "extends": [
+    "next/core-web-vitals",
+    "plugin:tailwindcss/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
+  "plugins": [
-  "ignorePatterns": ["**/src/api/*"],
+    "@typescript-eslint"
+  ],
+  "ignorePatterns": [
+    "**/src/api/*"
+  ],
   "rules": {
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "tailwindcss/no-custom-classname": "off"
   }
-}
+}

pkgs/ui/src/app/layout.tsx

@@ -50,11 +50,7 @@ export default function RootLayout({
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="description" content="Service Aware Networks" />
         <link rel="icon" href="tub-favicon.ico" sizes="any" />
-        <script type="module">
+        {/* <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> */}
-          import mermaid from
-          'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
-        </script>
-        <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
         <script
           // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{

pkgs/ui/src/components/sequence_diagram/index.tsx

@@ -14,7 +14,7 @@ import { NoDataOverlay } from "../noDataOverlay";
 import { useGetAllEventmessages } from "@/api/eventmessages/eventmessages";
 import { mutate } from "swr";
 import { LoadingOverlay } from "../join/loadingOverlay";
-import { generateMermaidString, dataFromBE } from "./helpers";
+import { generateMermaidString } from "./helpers";
 
 const SequenceDiagram = () => {
   const {
@@ -26,6 +26,7 @@ const SequenceDiagram = () => {
   const mermaidRef: any = useRef(null);
   const [scale, setScale] = useState(1);
   const hasData = eventMessagesData?.data && eventMessagesData?.data.length > 0;
+  // const hasData = true;
 
   const mermaidString = generateMermaidString(eventMessagesData?.data);
 
@@ -130,10 +131,10 @@ const SequenceDiagram = () => {
     return <LoadingOverlay title="Loading Diagram" subtitle="Please wait..." />;
 
   return (
-    <div className="flex flex-col items-end w-full">
+    <div className="flex w-full flex-col items-end">
       {hasData ? (
         <>
-          <div className="flex justify-end gap-2.5 mb-5 w-full">
+          <div className="flex w-full justify-end gap-2.5 mb-5">
             <Tooltip placement="top" title="Refresh Diagram">
               <IconButton color="default" onClick={onRefresh}>
                 <RefreshIcon />
@@ -165,12 +166,12 @@ const SequenceDiagram = () => {
               </IconButton>
             </Tooltip>
           </div>
-          <div className="w-full h-500 overflow-auto p-2.5 box-border h-full">
+          <div className="w-full h-full overflow-auto p-2.5 box-border">
             <div className="mermaid" ref={mermaidRef}></div>
           </div>
         </>
       ) : (
-        <div className="flex justify-center items-center w-full h-500">
+        <div className="flex w-full justify-center items-center">
           <NoDataOverlay label="No Activity yet" />
         </div>
       )}

pkgs/ui/tailwind.config.js

@@ -30,6 +30,7 @@ module.exports = {
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  safelist: ["mermaid"],
   important: "#__next",
   theme: {
     colors: {