From a6ab6e218fe646cfc87632b35f74992cea7885be Mon Sep 17 00:00:00 2001
From: Tom Carpenter <T.Carpenter@leeds.ac.uk>
Date: Mon, 30 Mar 2026 10:10:06 +0100
Subject: [PATCH] Fix new date-range-picker rendering on small screens (#51257)

---
 .../date-picker/date-range-picker.ts          | 28 +++++++++++++++----
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/components/date-picker/date-range-picker.ts b/src/components/date-picker/date-range-picker.ts
index 368a5e7c62..50072250c7 100644
--- a/src/components/date-picker/date-range-picker.ts
+++ b/src/components/date-picker/date-range-picker.ts
@@ -309,17 +309,39 @@ export class DateRangePicker extends LitElement {
     css`
       .picker {
         display: flex;
+        flex-direction: row;
       }
 
       .date-range-ranges {
         border-right: 1px solid var(--divider-color);
+        min-width: 140px;
+        flex: 0 1 30%;
       }
+
       .range {
         display: flex;
         flex-direction: column;
         align-items: center;
         flex: 1;
         padding: var(--ha-space-3);
+        overflow-x: hidden;
+      }
+
+      @media only screen and (max-width: 460px) {
+        .picker {
+          flex-direction: column;
+        }
+
+        .date-range-ranges {
+          flex-basis: 180px;
+          border-bottom: 1px solid var(--divider-color);
+          border-right: none;
+          overflow-y: scroll;
+        }
+
+        .range {
+          flex-basis: fit-content;
+        }
       }
 
       .times {
@@ -334,12 +356,6 @@ export class DateRangePicker extends LitElement {
         padding: var(--ha-space-2);
         border-top: 1px solid var(--divider-color);
       }
-
-      @media only screen and (max-width: 500px) {
-        .date-range-ranges {
-          max-width: 30%;
-        }
-      }
     `,
   ];
 }