diff --git a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
index 36b68a7e8..37d80a241 100644
--- a/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
+++ b/src/frontend/src/components/addNewVariableButtonComponent/addNewVariableButton.tsx
@@ -87,7 +87,7 @@ export default function AddNewVariableButton({ children }): JSX.Element {
           aria-hidden="true"
         />
       </BaseModal.Header>
-      <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
       <BaseModal.Content>
         <div className="flex h-full w-full flex-col gap-4 align-middle">
           <Label>Variable Name</Label>
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index d4e4732ca..8c9386d79 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useMemo } from "react";
+import { ReactNode, useEffect } from "react";
 
 import React from "react";
 import {
@@ -176,15 +176,12 @@ function BaseModal({
     }
   }, [open]);
 
-  const modalContent = useMemo(
-    () => (
-      <>
-        {headerChild}
-        {ContentChild}
-        {ContentFooter && ContentFooter}
-      </>
-    ),
-    [headerChild, ContentChild, ContentFooter],
+  const modalContent = (
+    <>
+      {headerChild}
+      {ContentChild}
+      {ContentFooter && ContentFooter}
+    </>
   );
 
   const contentClasses = cn(
@@ -211,7 +208,7 @@ function BaseModal({
                   event.preventDefault();
                   onSubmit();
                 }}
-                asChild
+                className="flex h-full flex-col gap-6"
               >
                 {modalContent}
               </Form.Root>