rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reduce Edit Domains modal width with CSS media queries (#7227)

Browse source
This commit is contained in:
Andras Bacsai 2025-11-14 10:22:20 +01:00 committed by GitHub
commit ec35b1fa9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
resources/views/components/modal-input.blade.php
View file

@ -8,8 +8,26 @@
'content' => null,
'closeOutside' => true,
'minWidth' => '36rem',
'maxWidth' => '48rem',
'isFullWidth' => false,
])
@php
$modalId = 'modal-' . uniqid();
@endphp
<style>
#{{ $modalId }} {
max-height: calc(100vh - 2rem);
}
@media (min-width: 1024px) {
#{{ $modalId }} {
min-width: {{ $minWidth }};
max-width: {{ $maxWidth }};
}
}
</style>
<div x-data="{ modalOpen: false }"
x-init="$watch('modalOpen', value => { if (!value) { $wire.dispatch('modalClosed') } })"
:class="{ 'z-40': modalOpen }" @keydown.window.escape="modalOpen=false"
@ -38,14 +56,14 @@ class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-scree
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 x-show="modalOpen" x-trap.inert.noscroll="modalOpen"
<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 border rounded-sm drop-shadow-sm min-w-full lg:min-w-[{{ $minWidth }}] max-w-fit max-h-[calc(100vh-2rem)] bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
class="relative w-full border rounded-sm drop-shadow-sm min-w-full 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"

2
resources/views/livewire/project/service/configuration.blade.php
View file

@ -66,7 +66,7 @@
@if ($application->fqdn)
<span class="flex gap-1 text-xs">{{ Str::limit($application->fqdn, 60) }}
@can('update', $service)
<x-modal-input title="Edit Domains" :closeOutside="false">
<x-modal-input title="Edit Domains" :closeOutside="false" minWidth="32rem" maxWidth="40rem">
<x-slot:content>
<span class="cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg"