fix overlflow issues + allow text selection (#543)

Author: regevbr

dist/atomic-calendar-revive.js

@@ -1,6 +1,6 @@
 {
 	"name": "atomic-calendar-revive",
-	"version": "6.1.1",
+	"version": "6.1.2",
 	"editor_version": "1.7.1",
 	"description": "Calendar Card for Home Assistant",
 	"main": "atomic-calendar-revive.js",

package.json

@@ -398,6 +398,8 @@ class AtomicCalendarRevive extends LitElement {
 					padding: 0px 5px 0 5px;
 					color: ${this._config.descColor};
 					font-size: ${this._config.descSize}%;
+					overflow-wrap: anywhere;
+					user-select: text;
 				}
 				.hidden-events {
 					color: var(--primary-text-color);
@@ -426,10 +428,12 @@ class AtomicCalendarRevive extends LitElement {
 					text-align: right;
 					display: inline-block;
 					vertical-align: top;
+					user-select: text;
 				}
 
 				.event-title {
 					font-size: ${this._config.eventTitleSize}%;
+					user-select: text;
 				}
 
 				.event-titleRunning {
@@ -448,6 +452,7 @@ class AtomicCalendarRevive extends LitElement {
 					text-decoration: none;
 					color: ${this._config.locationLinkColor};
 					font-size: ${this._config.locationTextSize}%;
+					user-select: text;
 				}
 
 				.event-circle {

src/index.ts

@@ -79,6 +79,8 @@ const style = css`
 		padding: 0px 5px 0 5px;
 		color: ${this._config.descColor};
 		font-size: ${this._config.descSize}%;
+		overflow-wrap: anywhere;
+		user-select: text;
 	}
 
 	.hoursHTML {
@@ -104,10 +106,12 @@ const style = css`
 		text-align: right;
 		display: inline-block;
 		vertical-align: top;
+		user-select: text;
 	}
 
 	.event-title {
 		font-size: ${this._config.eventTitleSize}%;
+		user-select: text;
 	}
 
 	.event-location-icon {