From 0970e1e33cd2bd162dc3b4c08ef256df19033c35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Lov=C3=A9n?= <thomasloven@gmail.com>
Date: Fri, 19 Oct 2018 10:41:08 +0200
Subject: [PATCH] Fix overflow of image elements. (#1811)

* Fix overflow of image elements.

* Positioning safeguards
---
 src/panels/lovelace/elements/hui-image-element.js |  2 +-
 src/panels/lovelace/mixins/element-click-mixin.js | 10 ++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/panels/lovelace/elements/hui-image-element.js b/src/panels/lovelace/elements/hui-image-element.js
index 978414ecef..450512de56 100644
--- a/src/panels/lovelace/elements/hui-image-element.js
+++ b/src/panels/lovelace/elements/hui-image-element.js
@@ -14,10 +14,10 @@ class HuiImageElement extends ElementClickMixin(PolymerElement) {
       <style>
         :host(.clickable) {
           cursor: pointer;
+          overflow: hidden;
           -webkit-touch-callout: none !important;
         }
         hui-image {
-          overflow-y: hidden;
           -webkit-user-select: none !important;
         }
       </style>
diff --git a/src/panels/lovelace/mixins/element-click-mixin.js b/src/panels/lovelace/mixins/element-click-mixin.js
index cc2022019e..3a2b16ad88 100644
--- a/src/panels/lovelace/mixins/element-click-mixin.js
+++ b/src/panels/lovelace/mixins/element-click-mixin.js
@@ -21,13 +21,15 @@ export default dedupingMixin(
 
         let ripple = null;
         const rippleWrapper = document.createElement("div");
-        this.shadowRoot.appendChild(rippleWrapper);
+        this.parentElement.appendChild(rippleWrapper);
         Object.assign(rippleWrapper.style, {
-          position: "absolute",
+          position: this.style.position || "absolute",
           width: isTouch ? "100px" : "50px",
           height: isTouch ? "100px" : "50px",
-          top: "50%",
-          left: "50%",
+          top: this.style.top,
+          left: this.style.left,
+          bottom: this.style.bottom,
+          right: this.style.right,
           transform: "translate(-50%, -50%)",
           pointerEvents: "none",
         });