diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.ts index 3f93142fc3..d9ce7ca8b4 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/health-check/views/health-check-group.ts @@ -59,7 +59,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement { vertical-align: middle; } - .data div:not(:first-child) { + .data .result-wrapper:not(:first-child) { padding-top: var(--uui-size-space-5); margin-top: var(--uui-size-space-5); border-top: 1px solid var(--uui-color-divider-standalone); @@ -72,19 +72,29 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement { margin-block-start: 1em; } - .action { - padding: var(---uui-size-space-4); + .action-wrapper { + margin-top: var(--uui-size-space-4); display: flex; - background-color: #eee; - align-items: center; + flex-direction: column; + gap: var(--uui-size-space-4); } - .action > * { - flex: 1; + .action { + width: 100%; + display: flex; + gap: var(--uui-size-space-4); + background-color: #eee; + align-items: center; } .action uui-button { margin: 0; padding: 0; + flex-shrink: 1; + } + + .no-description { + color: var(--uui-color-border-emphasis); + font-style: italic; } `, ]; @@ -153,13 +163,7 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement { return html`
${this.renderIcon(result.resultType)} ${result.message}
${result.readMoreLink ? html`${action[0].description}
+ private renderActions(actions: HealthCheckAction[]) { + if (actions.length) + return html`${action.description || html`This action has no description`}
+