Merge branch 'master' into browse-media

punxaphil · Mar 6, 2022 · 0ef5613 · 0ef5613
2 parents 83d9c1e + 081df45
commit 0ef5613
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/src/components/group.ts b/src/components/group.ts
@@ -60,28 +60,39 @@ class Group extends LitElement {
       }
       .group .wrap.active {
         border: thin solid var(--sonos-int-accent-color);
+      }
+      .group .wrap.active .speakers {
         font-weight: bold;
       }
       .group:first-child .wrap {
         margin-top: 0;
       }
       .speakers {
-        list-style: none;
         margin: 0;
         padding: 0;
       }
+      .speakers li:first-child::before {
+        content: "";
+        margin-right: 0;
+      }
+      .speakers li::before {
+        content: "+";
+        margin-right: .3em;
+      }
       .speakers li {
         display: block;
+        margin-right: .3rem;
+        float: left;
         font-size: 1rem;
-        margin: 0.25rem 0 0 0;
         color: var(--sonos-int-color);
-      }
-      .speakers li:first-child {
-        margin: 0;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .group .play {
         display: flex;
         flex-direction: row;
+        clear: both;
       }
       .group .play .content {
         flex: 1;

diff --git a/src/components/grouping-buttons.ts b/src/components/grouping-buttons.ts
@@ -83,10 +83,13 @@ class GroupingButtons extends LitElement {
         justify-content: center;
         background-color: var(--sonos-int-background-color);
         box-shadow: var(--sonos-int-box-shadow);
+        max-width: calc(100% - 1.4rem);
       }
       .member span {
         align-self: center;
         font-size: 1rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
       .member ha-icon {
         align-self: center;

diff --git a/src/components/player.ts b/src/components/player.ts
@@ -220,13 +220,17 @@ class Player extends LitElement {
 
       .artist,
       .album {
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-size: 0.75rem;
         font-weight: 300;
         color: var(--sonos-int-artist-album-text-color);
         white-space: wrap;
       }
 
       .song {
+        overflow: hidden;
+        text-overflow: ellipsis;
         font-size: 1.15rem;
         font-weight: 400;
         color: var(--sonos-int-accent-color);