diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts
index fdf9317d73..8378b3e173 100644
--- a/src/panels/lovelace/sections/hui-grid-section.ts
+++ b/src/panels/lovelace/sections/hui-grid-section.ts
@@ -65,20 +65,6 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
const editMode = Boolean(this.lovelace?.editMode && !this.isStrategy);
return html`
- ${this._config.title || this.lovelace?.editMode
- ? html`
-
- ${this._config.title ||
- this.hass.localize(
- "ui.panel.lovelace.editor.section.unnamed_section"
- )}
-
- `
- : nothing}
- ${editMode
- ? html`
-
- `
- : nothing}
- ${section}
+ ${
+ sectionConfig?.title || this.lovelace?.editMode
+ ? html`
+
+ `
+ : nothing
+ }
+ ${section}
+
`;
}
@@ -346,25 +367,6 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
}
}
- .section-actions {
- position: absolute;
- top: 0;
- right: 0;
- inset-inline-end: 0;
- inset-inline-start: initial;
- opacity: 1;
- display: flex;
- align-items: center;
- justify-content: center;
- transition: opacity 0.2s ease-in-out;
- background-color: rgba(var(--rgb-card-background-color), 0.3);
- border-radius: 18px;
- background: var(--secondary-background-color);
- --mdc-icon-button-size: 36px;
- --mdc-icon-size: 20px;
- color: var(--primary-text-color);
- }
-
.handle {
cursor: grab;
padding: 8px;
@@ -396,6 +398,55 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
margin: 16px 8px;
text-align: center;
}
+
+ .section-header {
+ position: relative;
+ height: var(--row-height);
+ margin-bottom: var(--row-gap);
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ }
+
+ .section-title {
+ color: var(--primary-text-color);
+ font-size: 20px;
+ font-weight: normal;
+ margin: 0px;
+ letter-spacing: 0.1px;
+ line-height: 32px;
+ text-align: var(--ha-view-sections-title-text-align, start);
+ min-height: 32px;
+ box-sizing: border-box;
+ padding: 0 10px 10px;
+ }
+
+ .section-title.placeholder {
+ color: var(--secondary-text-color);
+ font-style: italic;
+ }
+
+ .section-actions {
+ position: absolute;
+ height: 36px;
+ bottom: calc(-1 * var(--row-gap) - 2px);
+ right: 0;
+ inset-inline-end: 0;
+ inset-inline-start: initial;
+ opacity: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: opacity 0.2s ease-in-out;
+ background-color: rgba(var(--rgb-card-background-color), 0.3);
+ border-radius: var(--ha-card-border-radius, 12px);
+ border-bottom-left-radius: 0px;
+ border-bottom-right-radius: 0px;
+ background: var(--secondary-background-color);
+ --mdc-icon-button-size: 36px;
+ --mdc-icon-size: 20px;
+ color: var(--primary-text-color);
+ }
`;
}
}