From cdd2c7be9af6adc29918e089884fb77d75d00eaf Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Mon, 18 Dec 2023 04:20:21 -0800
Subject: [PATCH] Fix date-range-picker overflow on energy dashboard small
 screen (#19026)

---
 src/components/date-range-picker.ts  | 2 ++
 src/panels/energy/ha-panel-energy.ts | 1 +
 2 files changed, 3 insertions(+)

diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index b60ce14763..5732de5fc6 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -145,6 +145,8 @@ class DateRangePickerElement extends WrappedElement {
             );
             color: var(--primary-text-color);
             min-width: initial !important;
+            max-height: var(--date-range-picker-max-height);
+            overflow-y: auto;
           }
           .daterangepicker:before {
             display: none;
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 2c0bcf146c..26cdc94284 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -141,6 +141,7 @@ class PanelEnergy extends LitElement {
           padding-inline-start: 32px;
           --disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5);
           direction: var(--direction);
+          --date-range-picker-max-height: calc(100vh - 80px);
         }
         :host([narrow]) hui-energy-period-selector {
           padding-left: 0px;