feat(forms): make textarea monospace opt-in and improve multiline toggle

Add `monospace` prop to Textarea component so font-mono is no longer
applied by default. Apply it explicitly to env variable editors, private
key fields, and shared variable forms where monospace is appropriate.

Use Alpine.js x-data/x-model to make the multiline toggle reactive
without a full Livewire round-trip. Add wire:key on the input/textarea
wrappers to force proper DOM replacement when switching modes.
This commit is contained in:
Andras Bacsai committed 2026-03-31 15:37:42 +02:00
1 parent 47025c7815
commit 3961077b90
12 files changed
+87 -35

No files matched your search

@@ -150,17 +150,21 @@
<div class="flex flex-col w-full gap-2 lg:flex-row">
@if ($is_multiline)
<x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
<x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
<div class="flex-1" wire:key="env-show-value-textarea-{{ $env->id }}">
<x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
</div>
@else
<x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
<x-forms.env-var-input
:required="$is_redis_credential"
type="password"
id="value"
:availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
:projectUuid="data_get($parameters, 'project_uuid')"
:environmentUuid="data_get($parameters, 'environment_uuid')"
:serverUuid="data_get($parameters, 'server_uuid')" />
<div class="flex-1" wire:key="env-show-value-input-{{ $env->id }}">
<x-forms.env-var-input
:required="$is_redis_credential"
type="password"
id="value"
:availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
:projectUuid="data_get($parameters, 'project_uuid')"
:environmentUuid="data_get($parameters, 'environment_uuid')"
:serverUuid="data_get($parameters, 'server_uuid')" />
</div>
@endif
@if ($is_shared)
<x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled
@@ -312,4 +316,4 @@
@endif
</form>
</div>
</div>