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

@@ -84,24 +84,24 @@
Inline comments with space before # (e.g., <code class="font-mono">KEY=value #comment</code>) are stripped.
</x-callout>
<x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
<x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
label="Production Environment Variables"></x-forms.textarea>
@if ($showPreview)
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables" monospace
id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
@endif
<x-forms.button type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
@else
<x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
<x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
label="Production Environment Variables" disabled></x-forms.textarea>
@if ($showPreview)
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
<x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables" monospace
id="variablesPreview" wire:model="variablesPreview" disabled></x-forms.textarea>
@endif
@endcan
</form>
@endif
</div>
</div>