From ba796337588c4fdaabf4b287c29de2353f023f08 Mon Sep 17 00:00:00 2001
From: Jens Vanhooydonck <jensvanhooydonck@gmail.com>
Date: Fri, 4 Oct 2019 16:46:01 +0200
Subject: [PATCH] HA Cloud overflow wrap  (#3905)

* Overflow of Remote Control URL

* Overflow wrap of certificate information

Closes #2982

* Changed styling to class break-word

* Changed break-work to class

* Update src/panels/config/cloud/account/cloud-remote-pref.ts

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>
---
 src/panels/config/cloud/account/cloud-remote-pref.ts         | 5 ++++-
 .../dialog-cloud-certificate/dialog-cloud-certificate.ts     | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index eb9050b027..35f309c016 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -84,7 +84,7 @@ export class CloudRemotePref extends LitElement {
             : this.hass!.localize(
                 "ui.panel.config.cloud.account.remote.instance_will_be_available"
               )}
-          <a href="https://${remote_domain}" target="_blank">
+          <a href="https://${remote_domain}" target="_blank" class="break-word">
             https://${remote_domain}</a
           >.
         </div>
@@ -141,6 +141,9 @@ export class CloudRemotePref extends LitElement {
       a {
         color: var(--primary-color);
       }
+      .break-word {
+        overflow-wrap: break-word;
+      }
       .switch {
         position: absolute;
         right: 24px;
diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
index ac63582715..2964721dbf 100644
--- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
@@ -58,7 +58,7 @@ class DialogCloudCertificate extends LitElement {
               "ui.panel.config.cloud.dialog_certificate.will_be_auto_renewed"
             )})
           </p>
-          <p>
+          <p class="break-word">
             ${this.hass!.localize(
               "ui.panel.config.cloud.dialog_certificate.fingerprint"
             )}
@@ -92,6 +92,9 @@ class DialogCloudCertificate extends LitElement {
         ha-paper-dialog {
           width: 535px;
         }
+        .break-word {
+          overflow-wrap: break-word;
+        }
       `,
     ];
   }