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

@@ -501,7 +501,7 @@ export class HaChartBase extends LitElement {
   }
 
   private _getDefaultHeight() {
-    return this.clientWidth / 2;
+    return Math.max(this.clientWidth / 2, 200);
   }
 
   private _handleZoomReset() {

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;

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%;

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 {