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
@@ -158,8 +158,7 @@
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 @@
@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">
+10 -1
View File
@@ -150,7 +150,7 @@ it('groups configured domains and shows redirect settings in the table', functio
->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 @@ it('renders each domain table header below its service heading', function () {
->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')