From 4c7d0594694af26d26ea8586525e34ee6b6d35b7 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:44:27 +0100
Subject: [PATCH 1/4] Reduce width of Edit Domains modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduced the minWidth of the Edit Domains modal from 36rem to 24rem
to provide a more compact and focused user experience. The modal
was previously too wide for the simple domain input form.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../views/livewire/project/service/configuration.blade.php      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 452808282..4b7008984 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -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="24rem">
                                                     <x-slot:content>
                                                         <span class="cursor-pointer">
                                                             <svg xmlns="http://www.w3.org/2000/svg"

From e5f50c2b1ff7d0ae56bd035373b7675f7e444ade Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:46:05 +0100
Subject: [PATCH 2/4] Fix modal width: add maxWidth constraint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous fix reduced minWidth but modal still expanded to fit
content. Now:
- Added maxWidth prop to modal-input component (default 48rem)
- Set Edit Domains modal to minWidth=32rem, maxWidth=40rem
- This constrains the modal to a reasonable size range

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 resources/views/components/modal-input.blade.php               | 3 ++-
 .../views/livewire/project/service/configuration.blade.php     | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index b031740ca..d451f452d 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -8,6 +8,7 @@
     'content' => null,
     'closeOutside' => true,
     'minWidth' => '36rem',
+    'maxWidth' => '48rem',
     'isFullWidth' => false,
 ])
 <div x-data="{ modalOpen: false }"
@@ -45,7 +46,7 @@ class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
                 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 lg:min-w-[{{ $minWidth }}] lg:max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] 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"
diff --git a/resources/views/livewire/project/service/configuration.blade.php b/resources/views/livewire/project/service/configuration.blade.php
index 4b7008984..d8d6956af 100644
--- a/resources/views/livewire/project/service/configuration.blade.php
+++ b/resources/views/livewire/project/service/configuration.blade.php
@@ -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" minWidth="24rem">
+                                                <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"

From 95b847191babda669a6eb3bcde7368c874f58444 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 14 Nov 2025 09:58:53 +0100
Subject: [PATCH 3/4] Fix Tailwind JIT issue with dynamic width classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Tailwind JIT compiler doesn't compile dynamically interpolated classes
like lg:max-w-[{{ $maxWidth }}]. Switched to inline styles with media
queries to support dynamic min/max width values.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 resources/views/components/modal-input.blade.php | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index d451f452d..17ab54346 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -46,7 +46,8 @@ class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
                 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 }}] lg:max-w-[{{ $maxWidth }}] max-h-[calc(100vh-2rem)] bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                style="max-height: calc(100vh - 2rem); @media (min-width: 1024px) { min-width: {{ $minWidth }}; max-width: {{ $maxWidth }}; }"
+                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"

From 20099630fc043563d74e6cf19931a788f3389233 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Fri, 14 Nov 2025 10:05:00 +0100
Subject: [PATCH 4/4] Fix modal width with proper CSS media queries
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous approach used invalid inline styles with @media queries,
which browsers ignore. Now using:
- Unique modal ID generated with PHP uniqid()
- <style> tag with proper CSS media queries
- ID selector for scoped styling

This properly constrains modal width on large screens while keeping
full width on mobile.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../views/components/modal-input.blade.php    | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index 17ab54346..453ee88de 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -11,6 +11,23 @@
     '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"
@@ -39,14 +56,13 @@ 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"
-                style="max-height: calc(100vh - 2rem); @media (min-width: 1024px) { min-width: {{ $minWidth }}; max-width: {{ $maxWidth }}; }"
                 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>