chore: fix secrets editor for functions to be text area/ support newlines (#46754)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Update to support text area for functions

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Secret inputs now accept and preserve multi-line values and
auto-resize to fit content.
* Secret values can be masked/unmasked via a show/hide toggle with
tooltip; masking uses styled concealment.
* Per-secret controls refined: clearer row layout, dedicated remove
icon, and add/save controls moved to the card footer.

* **Tests**
* Added tests validating multi-line secret entry and that submitted
payloads include embedded newlines.
* Updated tests to assert masking/unmasking behavior via visual security
styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: kemal <hello@kemal.earth>

apps/studio/components/interfaces/Integrations/Vault/Secrets/AddNewSecretModal.tsx

@@ -1,5 +1,7 @@
 import { zodResolver } from '@hookform/resolvers/zod'
+import { Eye, EyeOff } from 'lucide-react'
 import { parseAsBoolean, useQueryState } from 'nuqs'
+import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { toast } from 'sonner'
 import {
@@ -15,8 +17,11 @@ import {
   FormControl,
   FormField,
   Input,
+  Textarea,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
 } from 'ui'
-import { Input as PasswordInput } from 'ui-patterns/DataInputs/Input'
 import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 import * as z from 'zod'
 
@@ -37,6 +42,8 @@ export const AddNewSecretModal = () => {
 
   const { mutateAsync: addSecret } = useVaultSecretCreateMutation()
 
+  const [isSecretVisible, setIsSecretVisible] = useState(false)
+
   const [showAddSecretModal, setShowAddSecretModal] = useQueryState(
     'new',
     parseAsBoolean.withDefault(false)
@@ -44,6 +51,7 @@ export const AddNewSecretModal = () => {
 
   const handleClose = () => {
     setShowAddSecretModal(null)
+    setIsSecretVisible(false)
     form.reset()
   }
 
@@ -116,7 +124,47 @@ export const AddNewSecretModal = () => {
                 render={({ field }) => (
                   <FormItemLayout layout="vertical" label="Secret value">
                     <FormControl className="col-span-6">
-                      <PasswordInput reveal copy {...field} />
+                      <div className="relative">
+                        <Textarea
+                          {...field}
+                          rows={1}
+                          ref={(el) => {
+                            field.ref(el)
+                            if (el) {
+                              el.style.height = 'auto'
+                              el.style.height = Math.max(40, el.scrollHeight) + 'px'
+                            }
+                          }}
+                          className="min-h-0 resize-none"
+                          style={
+                            {
+                              WebkitTextSecurity: isSecretVisible ? undefined : 'disc',
+                            } as React.CSSProperties
+                          }
+                          onChange={(e) => {
+                            field.onChange(e)
+                            e.currentTarget.style.height = 'auto'
+                            e.currentTarget.style.height =
+                              Math.max(40, e.currentTarget.scrollHeight) + 'px'
+                          }}
+                        />
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              type="text"
+                              className="absolute right-1 top-1 px-1"
+                              aria-label={
+                                isSecretVisible ? 'Hide secret value' : 'Show secret value'
+                              }
+                              icon={isSecretVisible ? <EyeOff /> : <Eye />}
+                              onClick={() => setIsSecretVisible((prev) => !prev)}
+                            />
+                          </TooltipTrigger>
+                          <TooltipContent side="bottom">
+                            {isSecretVisible ? 'Hide value' : 'Show value'}
+                          </TooltipContent>
+                        </Tooltip>
+                      </div>
                     </FormControl>
                   </FormItemLayout>
                 )}