tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-20 04:23:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): expose environment variable settings on mobile (#11198)

Browse Source
This commit is contained in:
Andras Bacsai
2026-08-12 11:52:11 +02:00
committed by GitHub
parent d662de05d9 4e3def11e3
commit 54c735b673
4 changed files with 50 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+25
View File
@@ -2026,6 +2026,31 @@ input[type="search"]::-webkit-search-results-decoration {
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;
resources/views/livewire/project/shared/environment-variable/show-hardcoded.blade.php
+7 -2
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>
resources/views/livewire/project/shared/environment-variable/show.blade.php
+7 -3
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>
tests/Feature/EnvironmentVariableTableLayoutTest.php
+11 -2
View File
@@ -80,16 +80,25 @@ test('resource environment variables table has a Managed column and no name-cell
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");
});