From 674bb0d16a27a1e5cc22295866f606c02f2decc0 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 5 Feb 2025 15:16:33 +0100
Subject: [PATCH] Set min height for graphs, adjust margins (#24078)

* Set min height for graphs, adjust margins

* stats + header adjustments

* set min to 200
---
 src/components/chart/ha-chart-base.ts                  | 2 +-
 src/components/chart/state-history-charts.ts           | 6 +++++-
 src/panels/lovelace/cards/hui-history-graph-card.ts    | 4 +++-
 src/panels/lovelace/cards/hui-statistics-graph-card.ts | 9 ++++++++-
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts
index 7e7c85498d..257725abcb 100644
--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -501,7 +501,7 @@ export class HaChartBase extends LitElement {
   }
 
   private _getDefaultHeight() {
-    return this.clientWidth / 2;
+    return Math.max(this.clientWidth / 2, 200);
   }
 
   private _handleZoomReset() {
diff --git a/src/components/chart/state-history-charts.ts b/src/components/chart/state-history-charts.ts
index 45c767cf04..8deb9694a7 100644
--- a/src/components/chart/state-history-charts.ts
+++ b/src/components/chart/state-history-charts.ts
@@ -157,7 +157,7 @@ export class StateHistoryCharts extends LitElement {
         ></state-history-chart-line>
       </div> `;
     }
-    return html`<div class="entry-container">
+    return html`<div class="entry-container timeline">
       <state-history-chart-timeline
         .hass=${this.hass}
         .data=${item}
@@ -316,6 +316,10 @@ export class StateHistoryCharts extends LitElement {
       padding-inline-end: 1px;
     }
 
+    .entry-container.timeline:first-child {
+      margin-top: var(--timeline-top-margin);
+    }
+
     .entry-container:not(:first-child) {
       border-top: 2px solid var(--divider-color);
       margin-top: 16px;
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index c28f45643e..0907d60254 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/src/panels/lovelace/cards/hui-history-graph-card.ts
@@ -303,6 +303,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     .card-header {
       justify-content: space-between;
       display: flex;
+      padding-bottom: 0;
     }
     .card-header ha-icon-next {
       --mdc-icon-button-size: 24px;
@@ -310,7 +311,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
       color: var(--primary-text-color);
     }
     .content {
-      padding: 16px;
+      padding: 0 16px 8px 16px;
       flex: 1;
     }
     .has-header {
@@ -318,6 +319,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     }
     state-history-charts {
       height: 100%;
+      --timeline-top-margin: 16px;
     }
     .has-rows {
       --chart-max-height: 100%;
diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts
index 6cc5b73a70..3754725c9d 100644
--- a/src/panels/lovelace/cards/hui-statistics-graph-card.ts
+++ b/src/panels/lovelace/cards/hui-statistics-graph-card.ts
@@ -261,7 +261,10 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
     const hasFixedHeight = typeof this._config.grid_options?.rows === "number";
 
     return html`
-      <ha-card .header=${this._config.title}>
+      <ha-card>
+        ${this._config.title
+          ? html`<h1 class="card-header">${this._config.title}</h1>`
+          : nothing}
         <div
           class="content ${classMap({
             "has-header": !!this._config.title,
@@ -372,8 +375,12 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard {
       flex-direction: column;
       height: 100%;
     }
+    .card-header {
+      padding-bottom: 0;
+    }
     .content {
       padding: 16px;
+      padding-top: 0;
       flex: 1;
     }
     .has-header {