fix responsive color picker

package.json

@@ -1,6 +1,6 @@
 {
   "name": "light-entity-card",
-  "version": "6.0.0",
+  "version": "6.0.1",
   "description": "A light-entity card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",

src/index.js

@@ -56,16 +56,30 @@ class LightEntityCard extends ScopedRegistryHost(LitElement) {
         color = { h, s, l: 100 }
       }
 
-      const colorPicker = new iro.ColorPicker(picker, {
-        width: 320,
+
+
+    this.colorPicker = new iro.ColorPicker(picker, {
         color,
         sliderSize: 0
       });
 
-      colorPicker.on("color:change", color => this.setColorPicker(color.hsl, entity));
+      this.setColorPickerSize();
+      this.colorPicker.on("color:change", color => this.setColorPicker(color.hsl, entity));
     }
   }
 
+  setColorPickerSize() {
+    if(!this.colorPicker) return;
+
+    const elem = this.shadowRoot.querySelector('.light-entity-card');
+    const width = elem.offsetWidth;
+    const calcWidth = width - 50;
+    const maxWidth = 300;
+
+    const realWidth = maxWidth > calcWidth ? calcWidth : maxWidth
+    this.colorPicker.resize(realWidth);
+  }
+
   static get properties() {
     return {
       hass: Object,
@@ -185,18 +199,7 @@ class LightEntityCard extends ScopedRegistryHost(LitElement) {
    */
   updated() {
     this._isUpdating = false;
-
-    // eslint-disable-next-line arrow-parens
-    this._shownStateObjects.forEach(stateObj => {
-      const id = this.generateColorPickerId(stateObj);
-      const colorpickerElement = this.shadowRoot.querySelectorAll(`#${id}`);
-
-      if (colorpickerElement.length) {
-        const h = (stateObj.attributes.hs_color && stateObj.attributes.hs_color[0]) || 0;
-        const s = (stateObj.attributes.hs_color && stateObj.attributes.hs_color[1] / 100) || 0;
-        colorpickerElement[0].desiredHsColor = { h, s };
-      }
-    });
+    this.setColorPickerSize();
   }
 
   /**

src/style.js

@@ -58,7 +58,7 @@ const style = css`
     display: flex;
     justify-content: space-around;
     margin-top: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 20px;
   }
 
   .group .light-entity-card__color-picker {