diff --git a/src/panels/lovelace/card-features/hui-card-features.ts b/src/panels/lovelace/card-features/hui-card-features.ts
index d36fc6ff0d..9e0e41672a 100644
--- a/src/panels/lovelace/card-features/hui-card-features.ts
+++ b/src/panels/lovelace/card-features/hui-card-features.ts
@@ -1,3 +1,4 @@
+import { mdiSwapHorizontal } from "@mdi/js";
import type { HassEntity } from "home-assistant-js-websocket";
import {
CSSResultGroup,
@@ -9,7 +10,7 @@ import {
} from "lit";
import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-control-button";
-import "../../../components/ha-icon-next";
+import "../../../components/ha-svg-icon";
import { HomeAssistant } from "../../../types";
import type { HuiErrorCard } from "../cards/hui-error-card";
import { LovelaceCardFeatureLayout } from "../cards/types";
@@ -86,7 +87,7 @@ export class HuiCardFeatures extends LitElement {
@click=${this._next}
.label=${"Next"}
>
-
+
`
: nothing}
@@ -132,6 +133,9 @@ export class HuiCardFeatures extends LitElement {
}
.next {
flex: none !important;
+ --control-button-background-opacity: 0;
+ --control-button-padding: 0;
+ width: 32px;
}
`;
}
diff --git a/src/panels/lovelace/cards/hui-tile-card.ts b/src/panels/lovelace/cards/hui-tile-card.ts
index 69d94ac11a..9fe06bb77f 100644
--- a/src/panels/lovelace/cards/hui-tile-card.ts
+++ b/src/panels/lovelace/cards/hui-tile-card.ts
@@ -126,9 +126,19 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
grid_columns: 2,
grid_rows: 1,
};
+ const featureLayoutType = this._config?.feature_layout?.type || "vertical";
+
if (this._config?.features?.length) {
- options.grid_rows += Math.ceil((this._config.features.length * 2) / 3);
+ if (featureLayoutType === "compact") {
+ options.grid_rows += 1;
+ } else if (featureLayoutType === "horizontal") {
+ options.grid_rows += 1;
+ options.grid_columns = 4;
+ } else {
+ options.grid_rows += Math.ceil((this._config.features.length * 2) / 3);
+ }
}
+
if (this._config?.vertical) {
options.grid_rows++;
}