From 5400b1da96e3668f25d52f9e2a594a85e4872e0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Thu, 6 Aug 2020 19:42:27 +0200
Subject: [PATCH] Fixes display issues with longer dates (#6540)

* Fixes display issues with longer dates

* review

* Remove size
---
 src/components/ha-date-range-picker.ts | 27 ++++++++++++++++++--------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 965c3c0cd6..884c893d56 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -163,13 +163,6 @@ export class HaDateRangePicker extends LitElement {
         border-right: 1px solid var(--divider-color);
       }
 
-      @media only screen and (max-width: 800px) {
-        .date-range-ranges {
-          border-right: none;
-          border-bottom: 1px solid var(--divider-color);
-        }
-      }
-
       .date-range-footer {
         display: flex;
         justify-content: flex-end;
@@ -179,12 +172,30 @@ export class HaDateRangePicker extends LitElement {
 
       paper-input {
         display: inline-block;
-        max-width: 200px;
+        max-width: 250px;
+        min-width: 200px;
       }
 
       paper-input:last-child {
         margin-left: 8px;
       }
+
+      @media only screen and (max-width: 800px) {
+        .date-range-ranges {
+          border-right: none;
+          border-bottom: 1px solid var(--divider-color);
+        }
+      }
+
+      @media only screen and (max-width: 500px) {
+        paper-input {
+          min-width: inherit;
+        }
+
+        ha-svg-icon {
+          display: none;
+        }
+      }
     `;
   }
 }