From f87c91834d3f6c777ee96e0c849505a1a23542b9 Mon Sep 17 00:00:00 2001
From: Artem Sedykh <anavrin72@gmail.com>
Date: Thu, 2 Jul 2020 17:03:55 +0300
Subject: [PATCH] fix #33

---
 README.md                        |  8 ++++----
 package-lock.json                |  2 +-
 package.json                     |  2 +-
 release_notes/v2.2.3.md          |  6 ++++++
 src/components/targetHumidity.js |  1 +
 src/main.js                      |  3 ++-
 src/style.js                     | 13 ++++++++++---
 7 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 release_notes/v2.2.3.md

diff --git a/README.md b/README.md
index cd0c029..c9706ac 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=2.2.2
+    - url: /local/mini-humidifier-bundle.js?v=2.2.3
       type: module
   ```
 
@@ -40,14 +40,14 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 2. Grab `mini-humidifier-bundle.js`
 
   ```console
-  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v2.2.2/mini-humidifier-bundle.js
+  $ wget https://github.com/artem-sedykh/mini-humidifier/releases/download/v2.2.3/mini-humidifier-bundle.js
   ```
 
 3. Add a reference to `mini-humidifier-bundle.js` inside your `ui-lovelace.yaml`.
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=2.2.2
+    - url: /local/mini-humidifier-bundle.js?v=2.2.3
       type: module
   ```
 
@@ -60,7 +60,7 @@ Inspired by [mini media player](https://github.com/kalkih/mini-media-player).
 
   ```yaml
   resources:
-    - url: /local/mini-humidifier-bundle.js?v=2.2.2
+    - url: /local/mini-humidifier-bundle.js?v=2.2.3
       type: module
   ```
 
diff --git a/package-lock.json b/package-lock.json
index c8c4fcf..54a6385 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-humidifier",
-  "version": "v2.0.1",
+  "version": "v2.2.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index d00830b..e57f59b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-humidifier",
-  "version": "v2.2.2",
+  "version": "v2.2.3",
   "description": "humidifier card for Home Assistant Lovelace UI",
   "keywords": [
     "home-assistant",
diff --git a/release_notes/v2.2.3.md b/release_notes/v2.2.3.md
new file mode 100644
index 0000000..cf3cbcc
--- /dev/null
+++ b/release_notes/v2.2.3.md
@@ -0,0 +1,6 @@
+## v2.2.3
+[![Downloads](https://img.shields.io/github/downloads/artem-sedykh/mini-humidifier/v2.2.3/total.svg)](https://github.com/artem-sedykh/mini-humidifier/releases/tag/v2.2.3)
+
+### FIXED
+- variable `ha-card-border-radius` added to styles, for rounding the edges of the card in various themes
+- small style fixes
diff --git a/src/components/targetHumidity.js b/src/components/targetHumidity.js
index 8880ab7..9f8ce74 100644
--- a/src/components/targetHumidity.js
+++ b/src/components/targetHumidity.js
@@ -87,6 +87,7 @@ class TargetHumidity extends LitElement {
         flex-direction: column-reverse;
         align-items: center;
         height: var(--mh-unit);
+        width: 100%;
       }
       .mh-target_humidifier ha-slider {
         flex: 1;
diff --git a/src/main.js b/src/main.js
index 1278cc2..ca5b06e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -376,6 +376,7 @@ class MiniHumidifier extends LitElement {
   }
 
   render() {
+    const cls = this.config.target_humidity.hide ? 'full' : '';
     return html`
       <ha-card
         class=${this.computeClasses()}
@@ -387,7 +388,7 @@ class MiniHumidifier extends LitElement {
             ${this.renderIcon()}
             <div class='entity__info'>
               <div class="wrap">
-                <div class="entity__info__name_wrap" 
+                <div class="entity__info__name_wrap ${cls}" 
                   @click=${e => this.handlePopup(e)}>
                   ${this.renderEntityName()}
                 </div>
diff --git a/src/style.js b/src/style.js
index 2db4aff..f0a59d7 100644
--- a/src/style.js
+++ b/src/style.js
@@ -55,6 +55,7 @@ const style = css`
     -webkit-transform: translateZ(0);
     transform: translateZ(0);
     opacity: var(--mh-bg-opacity);
+    border-radius: var(--ha-card-border-radius, 0);
   }
   
   .mh-humidifier {
@@ -164,9 +165,12 @@ const style = css`
   }
   .entity__info__name_wrap {
     margin-right: 0;
-    max-width: calc(var(--mh-unit) * 2.25);
+    max-width: calc(var(--mh-unit) * 4.25);
     cursor: pointer;
   }
+  .entity__info__name_wrap.full {
+    max-width: 80%;
+  }
   .--unavailable .ctl-wrap {
     margin-left: auto;
     margin-top: auto;
@@ -189,16 +193,19 @@ const style = css`
     display: flex;
   }
   .ctl-wrap {
-    width: 100%;
+    flex: 1;
+    margin-left: auto;
     display: flex;
     flex-direction: row;
   }
   mh-power {
     margin-left: auto;
     min-width: calc(var(--mh-unit) * .875);
+    margin-right: calc(var(--mh-unit) * -0.125);
   }
   mh-target-humidity {
-    width: 100%;
+    display: flex;
+    flex: 1;
   }
 `;