fix(ui): render service domain groups as separate cards

Move the settings-section body class onto each domain group so apps
render as stacked cards instead of a single bordered list. Update the
ServiceDomains view assertions to match.
This commit is contained in:
Andras Bacsai 2026-09-08 11:53:11 +02:00
parent 4a3dc11958
commit 3271fbdd67
2 changed files with 13 additions and 5 deletions

View file

@ -158,8 +158,7 @@ class="button button-highlighted">
icon-name="globe" />
</div>
@else
<div wire:key="service-domains-list"
class="application-settings-section-body is-flush mt-1 w-full scroll-mt-28 overflow-visible">
<div wire:key="service-domains-list" class="flex flex-col gap-3">
@foreach ($domainGroups as $appId => $rows)
@php
$app = collect($serviceApps)->firstWhere('id', (int) $appId);
@ -170,8 +169,8 @@ class="application-settings-section-body is-flush mt-1 w-full scroll-mt-28 overf
@endphp
<section id="service-domain-group-{{ $appId }}" wire:key="service-domain-group-{{ $appId }}"
x-show="matchesDomainSearch(@js($heading.' '.$rows->pluck('url')->implode(' ')))"
class="border-b border-neutral-200 last:border-b-0 dark:border-white/10">
<div class="flex w-full flex-wrap items-center gap-3 border-b border-neutral-200 bg-neutral-50 px-4 py-3 dark:border-white/10 dark:bg-white/[0.04]">
class="application-settings-section-body is-flush overflow-visible">
<div class="flex w-full flex-wrap items-center gap-3 rounded-t-lg border-b border-neutral-200 bg-neutral-50 px-4 py-3 dark:border-white/10 dark:bg-white/[0.04]">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-black dark:text-white">{{ $heading }}</span>
@if ($hasHttpsDomains)
<div class="flex w-full items-center gap-2 sm:w-auto service-domains-https">

View file

@ -150,7 +150,7 @@
->toContain('x-on:error="$el.remove()"')
->toContain('class="min-w-0 flex-1 truncate text-[13px]')
->toContain('class="listbox-trigger"')
->toContain('application-settings-section-body is-flush mt-1 w-full scroll-mt-28 overflow-visible')
->toContain('application-settings-section-body is-flush overflow-visible')
->toContain('dark:bg-white/[0.04]')
->toContain('<span>Domain</span>')
->toContain('<span>DNS status</span>')
@ -1126,6 +1126,15 @@
->and($domainTablePosition)->toBeGreaterThan($serviceHeadingPosition);
});
it('renders each service domain group as a separate card', function () {
$view = file_get_contents(resource_path('views/livewire/project/service/domains.blade.php'));
expect($view)
->toContain('class="flex flex-col gap-3"')
->toContain('class="application-settings-section-body is-flush overflow-visible"')
->not->toContain('class="border-b border-neutral-200 last:border-b-0 dark:border-white/10"');
});
it('lays out the domain settings dropdowns in responsive columns', function () {
$view = file_get_contents(resource_path('views/livewire/project/service/domains.blade.php'));
expect($view)->toContain('mt-4 grid grid-cols-1 gap-4 border-t border-neutral-200 pt-4 sm:grid-cols-2')