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

fix(ui): expose environment variable settings on mobile

Browse source 
Collapse environment variable rows to the key and settings action on small
screens, and let the key open the corresponding details modal.
This commit is contained in:
Andras Bacsai 2026-08-12 11:51:42 +02:00
parent d662de05d9
commit 4e3def11e3
4 changed files with 50 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
resources/css/app.css
View file

@ -2026,6 +2026,31 @@ .env-table-grid.env-table-grid-no-type {
grid-template-columns: minmax(14rem, 2.5fr) 4.8rem 4rem 4.5rem 4.8rem 4.2rem 3rem;
}
@media (max-width: 768px) {
.environment-table-scroll .env-table-grid {
min-width: 0;
}
.data-table-header.env-table-grid {
display: none;
}
.data-table-row.env-table-grid {
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.data-table-row.env-table-grid > :not(:first-child):not(:last-child) {
display: none;
}
.data-table-row.env-table-grid > :last-child {
display: block;
justify-self: end;
}
}
/* Shared variables only store value shape (multiline), not per-resource flags. */
.env-table-grid-shared {
grid-template-columns: minmax(0, 1.6fr) 6rem minmax(0, 1fr) 4.5rem 3rem;

9
resources/views/livewire/project/shared/environment-variable/show-hardcoded.blade.php
View file

@ -2,7 +2,12 @@
x-show="typeof envFilter === 'undefined' || envFilter === 'all' || envFilter === '{{ $isPreview ? 'preview' : 'production' }}'">
<div class="data-table-row env-table-grid {{ $showEnvironmentType ? '' : 'env-table-grid-no-type' }}">
<div class="flex min-w-0 items-center gap-2">
<span class="env-key-label min-w-0 truncate font-mono text-[13px] text-black dark:text-fg" title="{{ $key }}">{{ $key }}</span>
<button type="button" data-env-name-trigger
class="env-key-label min-w-0 truncate text-left font-mono text-[13px] text-black dark:text-fg"
title="{{ $key }}"
@click="$el.closest('.data-table-row').querySelector('[data-env-settings-trigger]').click()">
{{ $key }}
</button>
@if (filled($comment))
<x-helper :helper="e($comment)" />
@endif
@ -26,7 +31,7 @@
<div class="justify-self-end">
<x-modal-input title="Environment variable details" :closeOutside="false">
<x-slot:content>
<button type="button" class="icon-button shrink-0"
<button type="button" data-env-settings-trigger class="icon-button shrink-0"
title="View environment variable" aria-label="View environment variable">
<x-reicon name="settings" class="size-3.5" />
</button>

10
resources/views/livewire/project/shared/environment-variable/show.blade.php
View file

@ -24,8 +24,12 @@
</g>
</svg>
@endif
<span class="env-key-label min-w-0 truncate font-mono text-[13px] text-black dark:text-fg"
title="{{ $env->key }}">{{ $env->key }}</span>
<button type="button" data-env-name-trigger
class="env-key-label min-w-0 truncate text-left font-mono text-[13px] text-black dark:text-fg"
title="{{ $env->key }}"
@click="$el.closest('.data-table-row').querySelector('[data-env-settings-trigger]').click()">
{{ $env->key }}
</button>
@if (! $isSharedVariable && filled($comment))
<x-helper :helper="e($comment)" />
@endif
@ -84,7 +88,7 @@
<x-modal-input title="Edit environment variable" :closeOutside="false" :wireIgnore="false"
wireOpen="editorOpen">
<x-slot:content>
<button type="button" wire:click="loadValues" class="icon-button shrink-0"
<button type="button" wire:click="loadValues" data-env-settings-trigger class="icon-button shrink-0"
title="Edit environment variable" aria-label="Edit environment variable">
<x-reicon name="settings" class="size-3.5" />
</button>

13
tests/Feature/EnvironmentVariableTableLayoutTest.php
View file

@ -80,16 +80,25 @@
expect($show)->toContain('<x-helper :helper="e($comment)" />');
});
test('resource environment variables table remains horizontally scrollable on mobile', function () {
test('resource environment variables expose their settings action without horizontal scrolling on mobile', function () {
$view = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/all.blade.php'));
$show = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/show.blade.php'));
$hardcoded = file_get_contents(resource_path('views/livewire/project/shared/environment-variable/show-hardcoded.blade.php'));
$css = file_get_contents(resource_path('css/app.css'));
expect($view)
->toContain('environment-table-scroll')
->and($show)
->toContain('data-env-name-trigger')
->toContain('data-env-settings-trigger')
->and($hardcoded)
->toContain('data-env-name-trigger')
->toContain('data-env-settings-trigger')
->and($css)
->toContain(".environment-table-scroll {\n overflow-x: auto;")
->toContain(".environment-table-scroll .env-table-grid {\n min-width: 53rem;")
->not->toContain('.data-table-row.env-table-grid > :nth-child')
->toContain('.data-table-header.env-table-grid')
->toContain('.data-table-row.env-table-grid > :last-child')
->not->toContain(".env-type-desktop {\n display: none");
});