fix(ui): improve compose editor layout on mobile screens

resources/views/components/modal-input.blade.php

@@ -47,7 +47,7 @@
                 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"
                 class="absolute inset-0 w-full h-full bg-black/50 backdrop-blur-[2px]"></div>
-            <div @if ($closeOutside) @click.self="modalOpen=false" @endif class="relative flex min-h-full items-start justify-center p-4 sm:items-center">
+            <div @if ($closeOutside) @click.self="modalOpen=false" @endif class="relative flex min-h-full items-start justify-center p-2 sm:items-center sm:p-4">
                 <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"
@@ -61,19 +61,22 @@
                         'lg:w-auto lg:min-w-2xl lg:max-w-4xl' => ! $isLarge,
                     ])
                     style="box-shadow: 0 0 0 1px var(--coollabs-hairline), var(--shadow-modal)">
-                    <header class="flex-nowrap!">
+                    <header class="flex-wrap! sm:flex-nowrap!">
                         <h3 class="min-w-0 flex-1 truncate">{{ $title }}</h3>
                         @isset($headerActions)
-                            <div class="flex shrink-0 items-center gap-2">
+                            <div class="order-3 w-full sm:order-none sm:w-auto flex shrink-0 items-center gap-2">
                                 {{ $headerActions }}
                             </div>
                         @endisset
                         <button type="button" @click="modalOpen=false"
-                            class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-500 outline-0 transition-colors hover:bg-neutral-100 hover:text-black focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg">
+                            class="order-2 sm:order-none flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-neutral-500 outline-0 transition-colors hover:bg-neutral-100 hover:text-black focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent dark:text-fg-faint dark:hover:bg-white/[0.06] dark:hover:text-fg">
                             <x-reicon name="x" class="size-4" />
                         </button>
                     </header>
-                    <div class="application-settings-section-body min-h-0 flex-1 overflow-y-auto"
+                    <div @class([
+                        'application-settings-section-body min-h-0 flex-1 overflow-y-auto',
+                        'mt-2 sm:mt-0' => isset($headerActions),
+                    ])
                         style="-webkit-overflow-scrolling: touch;">
                         {{ $slot }}
                     </div>

resources/views/livewire/project/service/edit-compose.blade.php

@@ -25,7 +25,7 @@
     </div>
 
     <div
-        class="flex flex-wrap items-center gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-1 dark:border-white/[0.08] dark:bg-white/[0.025]">
+        class="flex flex-col items-stretch gap-2 rounded-lg border border-neutral-200 bg-neutral-50 p-1 sm:flex-row sm:flex-wrap sm:items-center dark:border-white/[0.08] dark:bg-white/[0.025]">
         <x-forms.checkbox label="Escape special characters in labels"
             helper="By default, $ (and other characters) is escaped. A $ in a label is saved as $$. Turn this off to use environment variables inside labels."
             id="isContainerLabelEscapeEnabled" instantSave />

resources/views/livewire/project/service/stack-form.blade.php

@@ -14,7 +14,7 @@
                         <x-slot:headerActions>
                             <div x-data="{ preview: false, validating: false, saving: false }"
                                 @compose-validate-finished.window="validating = false"
-                                @compose-save-finished.window="saving = false" class="flex items-center gap-2">
+                                @compose-save-finished.window="saving = false" class="flex w-full items-center gap-2 overflow-x-auto sm:w-auto">
                                 <x-forms.button
                                     @click="preview = !preview; $dispatch('compose-preview-toggle')">
                                     <x-reicon name="eye" class="size-3.5" />

tests/Feature/ComposeEditorLayoutTest.php

@@ -48,6 +48,27 @@ it('renders the compose editor with clear guidance settings and actions', functi
         ->not->toContain('Show Deployable Compose');
 });
 
+it('keeps the compose modal usable on mobile screens', function () {
+    $stackForm = file_get_contents(resource_path('views/livewire/project/service/stack-form.blade.php'));
+    $editor = file_get_contents(resource_path('views/livewire/project/service/edit-compose.blade.php'));
+    $modal = file_get_contents(resource_path('views/components/modal-input.blade.php'));
+
+    expect($modal)
+        ->toContain('justify-center p-2')
+        ->toContain('sm:p-4')
+        ->toContain('flex-wrap! sm:flex-nowrap!')
+        ->toContain('order-3 w-full sm:order-none sm:w-auto')
+        ->toContain('order-2 sm:order-none')
+        ->toContain("'mt-2 sm:mt-0' => isset(\$headerActions)");
+
+    expect($stackForm)
+        ->toContain('w-full items-center gap-2 overflow-x-auto sm:w-auto');
+
+    expect($editor)
+        ->toContain('flex-col items-stretch')
+        ->toContain('sm:flex-row sm:flex-wrap sm:items-center');
+});
+
 it('keeps the save button loading until the parent compose save finishes', function () {
     $component = file_get_contents(app_path('Livewire/Project/Service/StackForm.php'));