fix(server): resolved failing to use dynamic secret due to superuser

frontend/src/components/v2/Card/Card.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, ReactNode } from "react";
+import { CSSProperties, forwardRef, ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
 export type CardTitleProps = {
@@ -31,10 +31,13 @@ export const CardFooter = ({ children, className }: CardFooterProps) => (
 export type CardBodyProps = {
   children: ReactNode;
   className?: string;
+  style?: CSSProperties;
 };
 
-export const CardBody = ({ children, className }: CardBodyProps) => (
-  <div className={twMerge("px-6 pb-6 pt-0", className)}>{children}</div>
+export const CardBody = ({ children, className, style }: CardBodyProps) => (
+  <div className={twMerge("px-6 pb-6 pt-0", className)} style={style}>
+    {children}
+  </div>
 );
 
 export type CardProps = {
@@ -44,10 +47,14 @@ export type CardProps = {
   isRounded?: boolean;
   isPlain?: boolean;
   isHoverable?: boolean;
+  style?: CSSProperties;
 };
 
 export const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ children, isFullHeight, isRounded, isHoverable, isPlain, className }, ref): JSX.Element => {
+  (
+    { children, isFullHeight, isRounded, isHoverable, isPlain, className, style },
+    ref
+  ): JSX.Element => {
     return (
       <div
         ref={ref}
@@ -59,6 +66,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
           isHoverable && "hover:shadow-xl",
           className
         )}
+        style={style}
       >
         {children}
       </div>

frontend/src/components/v2/Modal/Modal.tsx

@@ -29,12 +29,15 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
         <Card
           isRounded
           className={twMerge(
-            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-h-screen max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
+            "thin-scrollbar fixed top-1/2 left-1/2 z-30 max-w-xl -translate-y-2/4 -translate-x-2/4 animate-popIn border border-mineshaft-600 drop-shadow-2xl dark:[color-scheme:dark]",
             className
           )}
+          style={{ maxHeight: "90%" }}
         >
           {title && <CardTitle subTitle={subTitle}>{title}</CardTitle>}
-          <CardBody>{children}</CardBody>
+          <CardBody className="overflow-y-auto overflow-x-hidden" style={{ maxHeight: "90%" }}>
+            {children}
+          </CardBody>
           {footerContent && <CardFooter>{footerContent}</CardFooter>}
           <DialogPrimitive.Close aria-label="Close" asChild onClick={onClose}>
             <IconButton