Fix better

src-web/components/TemplateFunctionDialog.tsx

@@ -190,7 +190,7 @@ function InitializedTemplateFunctionDialog({
           />
         )}
       </div>
-      <div className="px-6 border-t border-t-border py-3 bg-surface-highlight w-full flex flex-col gap-4">
+      <div className="px-6 border-t border-t-border pt-3 pb-6 bg-surface-highlight w-full flex flex-col gap-4">
         {previewType !== 'none' ? (
           <div className="w-full grid grid-cols-1 grid-rows-[auto_auto]">
             <HStack space={0.5}>

src-web/components/core/Editor/twig/templateTags.ts

@@ -92,11 +92,12 @@ function templateTags(
           let option = options.find(
             (o) => o.name === name || (o.type === 'function' && o.aliases?.includes(name)),
           );
+
           if (option == null) {
             const from = node.from; // Cache here so the reference doesn't change
             option = {
-              invalid: true,
               type: 'variable',
+              invalid: true,
               name: inner,
               value: null,
               label: inner,
@@ -112,7 +113,8 @@ function templateTags(
             for (const arg of option.args) {
               if (!('optional' in arg)) continue;
               if (!arg.optional && values[arg.name] == null) {
-                option.invalid = true;
+                // Clone so we don't mutate the original
+                option = { ...option, invalid: true };
                 break;
               }
             }