From 6791e856254db1ee60840bfbdacf312df8c2c349 Mon Sep 17 00:00:00 2001
From: Paul Bottein <paul.bottein@gmail.com>
Date: Tue, 23 Jul 2024 13:13:35 +0200
Subject: [PATCH] Set 56px row height for new section button and title (#21456)

---
 src/panels/lovelace/sections/hui-grid-section.ts | 7 ++++++-
 src/panels/lovelace/views/hui-sections-view.ts   | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/sections/hui-grid-section.ts b/src/panels/lovelace/sections/hui-grid-section.ts
index c29334cd51e8..ea011df222ee 100644
--- a/src/panels/lovelace/sections/hui-grid-section.ts
+++ b/src/panels/lovelace/sections/hui-grid-section.ts
@@ -246,7 +246,12 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           text-align: var(--ha-view-sections-title-text-align, start);
           min-height: 32px;
           display: block;
-          padding: 24px 10px 10px;
+          height: var(--row-height);
+          box-sizing: border-box;
+          padding: 0 10px 10px;
+          display: flex;
+          flex-direction: column;
+          justify-content: flex-end;
         }
 
         .title.placeholder {
diff --git a/src/panels/lovelace/views/hui-sections-view.ts b/src/panels/lovelace/views/hui-sections-view.ts
index 722210f48d4c..4dd2a89ac85d 100644
--- a/src/panels/lovelace/views/hui-sections-view.ts
+++ b/src/panels/lovelace/views/hui-sections-view.ts
@@ -249,6 +249,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
   static get styles(): CSSResultGroup {
     return css`
       :host {
+        --row-height: var(--ha-view-sections-row-height, 56px);
         --row-gap: var(--ha-view-sections-row-gap, 8px);
         --column-gap: var(--ha-view-sections-column-gap, 32px);
         --column-min-width: var(--ha-view-sections-column-min-width, 320px);
@@ -327,14 +328,14 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
       }
 
       .create-section {
-        margin-top: calc(66px + var(--row-gap));
+        margin-top: calc(var(--row-height) + var(--row-gap));
         outline: none;
         background: none;
         cursor: pointer;
         border-radius: var(--ha-card-border-radius, 12px);
         border: 2px dashed var(--primary-color);
         order: 1;
-        height: calc(66px + 2 * (var(--row-gap) + 2px));
+        height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px));
         padding: 8px;
         box-sizing: border-box;
       }