Move edit mode actions next to section block (#21840)

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`
-            <h2
-              class="title ${classMap({
-                placeholder: !this._config.title,
-              })}"
-            >
-              ${this._config.title ||
-              this.hass.localize(
-                "ui.panel.lovelace.editor.section.unnamed_section"
-              )}
-            </h2>
-          `
-        : nothing}
       <ha-sortable
         .disabled=${!editMode}
         @item-moved=${this._cardMoved}
@@ -206,33 +192,11 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
         .container.edit-mode {
           padding: 8px;
           border-radius: var(--ha-card-border-radius, 12px);
+          border-start-end-radius: 0px;
           border: 2px dashed var(--divider-color);
           min-height: var(--row-height);
         }
 
-        .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;
-          display: block;
-          height: var(--row-height);
-          box-sizing: border-box;
-          padding: 0 10px 10px;
-          display: flex;
-          flex-direction: column;
-          justify-content: flex-end;
-        }
-
-        .title.placeholder {
-          color: var(--secondary-text-color);
-          font-style: italic;
-        }
-
         .card {
           border-radius: var(--ha-card-border-radius, 12px);
           position: relative;

src/panels/lovelace/views/hui-sections-view.ts

@@ -175,32 +175,53 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
                     "--column-span": columnSpan,
                   })}
                 >
-                  ${editMode
+                    ${
-                    ? html`
+                      sectionConfig?.title || this.lovelace?.editMode
-                        <div class="section-overlay">
+                        ? html`
-                          <div class="section-actions">
+                            <div class="section-header">
-                            <ha-svg-icon
+                              <h2
-                              aria-hidden="true"
+                                class="section-title ${classMap({
-                              class="handle"
+                                  placeholder: !sectionConfig?.title,
-                              .path=${mdiArrowAll}
+                                })}"
-                            ></ha-svg-icon>
+                              >
-                            <ha-icon-button
+                                ${sectionConfig?.title ||
-                              .label=${this.hass.localize("ui.common.edit")}
+                                this.hass.localize(
-                              @click=${this._editSection}
+                                  "ui.panel.lovelace.editor.section.unnamed_section"
-                              .index=${idx}
+                                )}
-                              .path=${mdiPencil}
+                              </h2>
-                            ></ha-icon-button>
+                              ${editMode
-                            <ha-icon-button
+                                ? html`
-                              .label=${this.hass.localize("ui.common.delete")}
+                                    <div class="section-actions">
-                              @click=${this._deleteSection}
+                                      <ha-svg-icon
-                              .index=${idx}
+                                        aria-hidden="true"
-                              .path=${mdiDelete}
+                                        class="handle"
-                            ></ha-icon-button>
+                                        .path=${mdiArrowAll}
-                          </div>
+                                      ></ha-svg-icon>
-                        </div>
+                                      <ha-icon-button
-                      `
+                                        .label=${this.hass.localize(
-                    : nothing}
+                                          "ui.common.edit"
-                  ${section}
+                                        )}
+                                        @click=${this._editSection}
+                                        .index=${idx}
+                                        .path=${mdiPencil}
+                                      ></ha-icon-button>
+                                      <ha-icon-button
+                                        .label=${this.hass.localize(
+                                          "ui.common.delete"
+                                        )}
+                                        @click=${this._deleteSection}
+                                        .index=${idx}
+                                        .path=${mdiDelete}
+                                      ></ha-icon-button>
+                                    </div>
+                                  `
+                                : nothing}
+                            </div>
+                          `
+                        : nothing
+                    }
+                    ${section}
+                  </div>
                 </div>
               `;
             }
@@ -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);
+      }
     `;
   }
 }