fix(domains): compact service cards at medium widths

This commit is contained in:
Andras Bacsai 2026-09-10 14:08:46 +02:00
parent 6028461f92
commit 3229141126
2 changed files with 48 additions and 33 deletions

View file

@ -4751,42 +4751,14 @@ @container service-domains (max-width: 980px) {
}
.data-table-row.service-domains-overview-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
}
.data-table-row.service-domains-overview-grid > :first-child {
grid-column: 1 / -1;
}
.service-domain-detail {
justify-content: space-between;
gap: 0.5rem;
}
.service-domain-detail-label {
display: inline;
color: var(--coollabs-fg-dim);
}
}
@container service-domains (max-width: 600px) {
.data-table-row.service-domains-overview-grid {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-columns: minmax(0, 1fr) auto auto;
grid-template-areas: "domain dns actions" "summary summary summary";
gap: 0.625rem 0.75rem;
padding: 0.875rem;
padding: 0.75rem;
}
.data-table-row.service-domains-overview-grid > :first-child {
grid-column: 1 / -1;
}
.data-table-row.service-domains-overview-grid > :first-child a,
.data-table-row.service-domains-overview-grid > :first-child span[title] {
overflow: visible;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
grid-area: domain;
}
.service-domain-detail,
@ -4796,7 +4768,7 @@ @container service-domains (max-width: 600px) {
.service-domain-mobile-summary {
display: flex;
grid-column: 1 / -1;
grid-area: summary;
flex-wrap: wrap;
align-items: center;
gap: 0.375rem 0.75rem;
@ -4812,10 +4784,43 @@ @container service-domains (max-width: 600px) {
}
.service-domain-dns {
grid-area: dns;
justify-self: end;
}
.service-domain-actions {
grid-area: actions;
justify-self: end;
}
}
@container service-domains (max-width: 600px) {
.data-table-row.service-domains-overview-grid {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "domain domain" "summary summary" "dns actions";
gap: 0.625rem 0.75rem;
padding: 0.875rem;
}
.data-table-row.service-domains-overview-grid > :first-child {
grid-area: domain;
}
.data-table-row.service-domains-overview-grid > :first-child a,
.data-table-row.service-domains-overview-grid > :first-child span[title] {
overflow: visible;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.35;
}
.service-domain-dns {
grid-area: dns;
justify-self: start;
}
.service-domain-actions {
grid-area: actions;
justify-self: end;
}

View file

@ -1894,6 +1894,16 @@
->not->toContain('title="No domains for this service"');
});
it('uses a compact two row domain card at medium widths', function () {
$css = file_get_contents(resource_path('css/app.css'));
expect($css)
->toContain('@container service-domains (max-width: 980px)')
->toContain('grid-template-columns: minmax(0, 1fr) auto auto;')
->toContain('grid-template-areas: "domain dns actions" "summary summary summary";')
->toContain('grid-area: summary;');
});
it('uses concise search indexing headers in application and service domain tables', function () {
$applicationView = file_get_contents(resource_path('views/livewire/project/application/domains.blade.php'));
$serviceView = file_get_contents(resource_path('views/livewire/project/service/partials/domain-table.blade.php'));