From 3271fbdd6701a2c4da678298742db02cd9b5dbd6 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Tue, 8 Sep 2026 11:53:11 +0200
Subject: [PATCH] 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.
---
 .../views/livewire/project/service/domains.blade.php  |  7 +++----
 tests/Feature/ServiceDomainsTest.php                  | 11 ++++++++++-
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/resources/views/livewire/project/service/domains.blade.php b/resources/views/livewire/project/service/domains.blade.php
index 05b804fde..0955e534c 100644
--- a/resources/views/livewire/project/service/domains.blade.php
+++ b/resources/views/livewire/project/service/domains.blade.php
@@ -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">
diff --git a/tests/Feature/ServiceDomainsTest.php b/tests/Feature/ServiceDomainsTest.php
index 5ef8cc622..da6701656 100644
--- a/tests/Feature/ServiceDomainsTest.php
+++ b/tests/Feature/ServiceDomainsTest.php
@@ -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')