From 198e9f8fff379cdfe9ef44d3f0589d501b2ef809 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 14 Jul 2026 14:02:34 +0200
Subject: [PATCH] fix(environment-variable): align settings and actions
 responsively

---
 .../shared/environment-variable/show.blade.php       | 12 +++++++-----
 .../EnvironmentVariableMultilineToggleViewTest.php   |  8 ++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/project/shared/environment-variable/show.blade.php b/resources/views/livewire/project/shared/environment-variable/show.blade.php
index fd9acdaf8..76cfcead6 100644
--- a/resources/views/livewire/project/shared/environment-variable/show.blade.php
+++ b/resources/views/livewire/project/shared/environment-variable/show.blade.php
@@ -217,8 +217,9 @@ class="input italic !text-neutral-500 dark:!text-neutral-500" />
                 </div>
             @endcan
             @can('update', $this->env)
-                <div class="flex flex-col w-full gap-3">
-                    <div class="flex flex-wrap w-full items-center gap-4">
+                <div class="flex w-full flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
+                    <div class="flex min-w-0 flex-1 flex-col gap-3">
+                        <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
                                 @if (!$isMagicVariable)
@@ -266,10 +267,11 @@ class="input italic !text-neutral-500 dark:!text-neutral-500" />
                                 @endif
                             @endif
                         @endif
+                        </div>
+                        <x-environment-variable-warning :problematic-variables="$problematicVariables" />
                     </div>
-                    <x-environment-variable-warning :problematic-variables="$problematicVariables" />
                     @if (!$isMagicVariable)
-                        <div class="flex w-full justify-end gap-2">
+                        <div class="flex w-full justify-end gap-2 lg:w-auto lg:shrink-0">
                             @if ($isDisabled)
                             <x-forms.button disabled type="submit">Update</x-forms.button>
                             <x-forms.button wire:click='lock'>Lock</x-forms.button>
@@ -291,7 +293,7 @@ class="input italic !text-neutral-500 dark:!text-neutral-500" />
                             @endif
                         </div>
                     @elseif ($type === 'service')
-                        <div class="flex w-full justify-end gap-2">
+                        <div class="flex w-full justify-end gap-2 lg:w-auto lg:shrink-0">
                             <x-forms.button wire:click='lock'>Lock</x-forms.button>
                         </div>
                     @endif
diff --git a/tests/Feature/EnvironmentVariableMultilineToggleViewTest.php b/tests/Feature/EnvironmentVariableMultilineToggleViewTest.php
index 8af9c69d5..9d0b1c5b5 100644
--- a/tests/Feature/EnvironmentVariableMultilineToggleViewTest.php
+++ b/tests/Feature/EnvironmentVariableMultilineToggleViewTest.php
@@ -27,6 +27,14 @@
     expect($view)->not->toContain('buttonFullWidth="true"');
 });
 
+it('aligns environment variable settings and actions in a responsive row', function () {
+    $view = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/show.blade.php'));
+
+    expect($view)
+        ->toContain('class="flex w-full flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"')
+        ->toContain('class="flex w-full justify-end gap-2 lg:w-auto lg:shrink-0"');
+});
+
 it('uses sans font for the developer bulk environment variable editor', function () {
     $view = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/all.blade.php'));