4592d19ed3
The modal-input component was using inline <style> blocks with ID selectors
to apply width constraints, which had inconsistent specificity and only
applied on lg+ breakpoints. This caused modals to appear full-width instead
of being properly constrained.
Replaced the inline style approach with Tailwind utility classes following
the pattern used in modal-confirmation component:
- Removed inline <style> block with media queries
- Added min-w-full and lg:min-w-[{minWidth}] for responsive minimum width
- Added max-w-[{maxWidth}] and max-h-[calc(100vh-2rem)] for size constraints
This ensures consistent modal sizing across all breakpoints and fixes the
full-width modal issue reported when adding shared environment variables.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
72 lines
4.1 KiB
PHP
72 lines
4.1 KiB
PHP
@props([
|
|
'title' => 'Are you sure?',
|
|
'buttonTitle' => 'Open Modal',
|
|
'isErrorButton' => false,
|
|
'isHighlightedButton' => false,
|
|
'disabled' => false,
|
|
'action' => 'delete',
|
|
'content' => null,
|
|
'closeOutside' => true,
|
|
'minWidth' => '36rem',
|
|
'maxWidth' => '48rem',
|
|
'isFullWidth' => false,
|
|
])
|
|
|
|
@php
|
|
$modalId = 'modal-' . uniqid();
|
|
@endphp
|
|
|
|
|
|
<div x-data="{ modalOpen: false }"
|
|
x-init="$watch('modalOpen', value => { if (!value) { $wire.dispatch('modalClosed') } })"
|
|
:class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
|
|
class="relative w-auto h-auto" wire:ignore>
|
|
@if ($content)
|
|
<div @click="modalOpen=true">
|
|
{{ $content }}
|
|
</div>
|
|
@else
|
|
@if ($disabled)
|
|
<x-forms.button isError disabled @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
|
|
@elseif ($isErrorButton)
|
|
<x-forms.button isError @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
|
|
@elseif ($isHighlightedButton)
|
|
<x-forms.button isHighlighted @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
|
|
@else
|
|
<x-forms.button @click="modalOpen=true" @class(['w-full' => $isFullWidth])>{{ $buttonTitle }}</x-forms.button>
|
|
@endif
|
|
@endif
|
|
<template x-teleport="body">
|
|
<div x-show="modalOpen"
|
|
x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
|
|
class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4">
|
|
<div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
|
|
@if ($closeOutside) @click="modalOpen=false" @endif
|
|
class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
|
|
<div id="{{ $modalId }}" x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
|
|
x-transition:enter="ease-out duration-100"
|
|
x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-100"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
|
|
class="relative w-full min-w-full lg:min-w-[{{ $minWidth }}] max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
|
|
<div class="flex items-center justify-between py-6 px-6 shrink-0">
|
|
<h3 class="text-2xl font-bold">{{ $title }}</h3>
|
|
<button @click="modalOpen=false"
|
|
class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
|
|
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="relative flex items-center justify-center w-auto overflow-y-auto px-6 pb-6" style="-webkit-overflow-scrolling: touch;">
|
|
{{ $slot }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|