diff --git a/src/components/ha-list-item.ts b/src/components/ha-list-item.ts
index 7b9b633a76..a5179008b5 100644
--- a/src/components/ha-list-item.ts
+++ b/src/components/ha-list-item.ts
@@ -17,8 +17,14 @@ export class HaListItem extends ListItemBase {
styles,
css`
:host {
- padding-left: var(--mdc-list-side-padding, 20px);
- padding-right: var(--mdc-list-side-padding, 20px);
+ padding-left: var(
+ --mdc-list-side-padding-left,
+ var(--mdc-list-side-padding, 20px)
+ );
+ padding-right: var(
+ --mdc-list-side-padding-right,
+ var(--mdc-list-side-padding, 20px)
+ );
}
:host([graphic="avatar"]:not([twoLine])),
:host([graphic="icon"]:not([twoLine])) {
diff --git a/src/panels/config/integrations/ha-config-integration-page.ts b/src/panels/config/integrations/ha-config-integration-page.ts
index a374ef0fa5..b5ecc21f75 100644
--- a/src/panels/config/integrations/ha-config-integration-page.ts
+++ b/src/panels/config/integrations/ha-config-integration-page.ts
@@ -1179,7 +1179,8 @@ class HaConfigIntegrationPage extends SubscribeMixin(LitElement) {
padding: 0;
}
img {
- width: 200px;
+ max-width: 200px;
+ max-height: 100px;
}
ha-alert {
display: block;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 5b83d20dbf..2d4a39b486 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -1,7 +1,12 @@
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
import "@material/mwc-button";
import "@material/mwc-list";
-import { mdiApplication, mdiCog, mdiDevices, mdiShape } from "@mdi/js";
+import {
+ mdiCogOutline,
+ mdiDevices,
+ mdiHandExtendedOutline,
+ mdiShapeOutline,
+} from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
@@ -78,7 +83,7 @@ export class HaIntegrationCard extends LitElement {
href=${`/config/integrations/integration/${this.domain}`}
slot="header-button"
>
-
+
@@ -103,7 +108,7 @@ export class HaIntegrationCard extends LitElement {
>
${this.hass.localize(
@@ -122,7 +127,10 @@ export class HaIntegrationCard extends LitElement {
href=${`/config/entities?historyBack=1&domain=${this.domain}`}
>
-
+
${this.hass.localize(
`ui.panel.config.integrations.config_entry.entities`,
"count",
@@ -191,6 +199,7 @@ export class HaIntegrationCard extends LitElement {
display: flex;
flex-direction: column;
height: 100%;
+ overflow: hidden;
--state-color: var(--divider-color, #e0e0e0);
--ha-card-border-color: var(--state-color);
--state-message-color: var(--state-color);
@@ -219,7 +228,9 @@ export class HaIntegrationCard extends LitElement {
}
.content {
flex: 1;
- --mdc-list-side-padding: 16px;
+ --mdc-list-side-padding-right: 20px;
+ --mdc-list-side-padding-left: 24px;
+ --mdc-list-item-graphic-margin: 24px;
}
a {
text-decoration: none;