From 4592d19ed3baace9759eda99642e5c6b60c88f6c Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 18 Nov 2025 08:56:29 +0100
Subject: [PATCH] fix: replace inline styles with Tailwind classes in
 modal-input component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 resources/views/components/modal-input.blade.php | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/resources/views/components/modal-input.blade.php b/resources/views/components/modal-input.blade.php
index 453ee88de..d65162d36 100644
--- a/resources/views/components/modal-input.blade.php
+++ b/resources/views/components/modal-input.blade.php
@@ -16,17 +16,6 @@
     $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') } })"
@@ -63,7 +52,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 bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                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"