Set 56px row height for new section button and title (#21456)

home-assistant · Jul 23, 2024 · 6791e85 · 6791e85
1 parent 79618ce
commit 6791e85
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git 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
@@ -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;
       }