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`Read more` : nothing} -
- ${result.actions - ? this.renderActions(result.actions) - : this.renderActions([ - { name: 'button label', description: 'What the button will do', alias: 'methodname??' }, - ])} -
+ ${result.actions ? this.renderActions(result.actions) : nothing}
`; })} @@ -181,11 +185,17 @@ export class UmbDashboardHealthCheckGroupElement extends UmbLitElement { } } - private renderActions(action: HealthCheckAction[]) { - if (action[0].name) - return html`
- ${action[0].name} -

${action[0].description}

+ private renderActions(actions: HealthCheckAction[]) { + if (actions.length) + return html`
+ ${actions.map((action) => { + return html`
+ + ${action.name || 'Action'} + +

${action.description || html`This action has no description`}

+
`; + })}
`; else return nothing; }