Fixed BaseModal text padding

src/frontend/src/components/ui/dialog.tsx

@@ -27,7 +27,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 flex w-full max-w-lg flex-col gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] sm:rounded-lg md:w-full",
-        className
+        className,
       )}
       {...props}
     >
@@ -64,8 +64,8 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
+      "flex flex-col space-y-1 text-center sm:text-left",
+      className,
     )}
     {...props}
   />
@@ -79,7 +79,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -94,7 +94,7 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "text-lg font-semibold leading-none tracking-tight",
-      className
+      className,
     )}
     {...props}
   />

src/frontend/src/modals/baseModal/index.tsx

@@ -37,7 +37,7 @@ const Content: React.FC<ContentProps> = ({ children, overflowHidden }) => {
     <div
       className={cn(
         `flex w-full flex-grow flex-col transition-all duration-300`,
-        overflowHidden ? "overflow-hidden" : "overflow-visible"
+        overflowHidden ? "overflow-hidden" : "overflow-visible",
       )}
     >
       {children}
@@ -68,7 +68,7 @@ const Header: React.FC<{
 }> = ({ children, description }: modalHeaderType): JSX.Element => {
   return (
     <DialogHeader>
-      <DialogTitle className="line-clamp-1 flex items-center">
+      <DialogTitle className="line-clamp-1 flex items-center pb-0.5">
         {children}
       </DialogTitle>
       <DialogDescription className="line-clamp-2">
@@ -122,7 +122,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?
+    React.ReactElement<FooterProps>?,
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -158,16 +158,16 @@ function BaseModal({
   onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Header
+    (child) => (child as React.ReactElement).type === Header,
   );
   const triggerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Trigger
+    (child) => (child as React.ReactElement).type === Trigger,
   );
   const ContentChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Content
+    (child) => (child as React.ReactElement).type === Content,
   );
   const ContentFooter = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Footer
+    (child) => (child as React.ReactElement).type === Footer,
   );
 
   let { minWidth, height } = switchCaseModalSize(size);
@@ -189,7 +189,7 @@ function BaseModal({
   const contentClasses = cn(
     minWidth,
     height,
-    "flex flex-col duration-300 overflow-hidden"
+    "flex flex-col duration-300 overflow-hidden",
   );
 
   //UPDATE COLORS AND STYLE CLASSSES