Truncate receiver application status text

app/NativeMacReceiverSelector/ReceiverView.swift

@@ -37,15 +37,24 @@ class ReceiverView : NSStackView {
 
         self.receiver = receiver
 
+
         let statusText = receiver.status.application.isIdleScreen
             ? "\(receiver.host):\(receiver.port)"
             : receiver.status.application.statusText
 
+        let addressLabel = makeLabel(statusText
+              , size: NSFont.smallSystemFontSize
+              , color: .secondaryLabelColor)
+
+        // Truncate long status text
+        addressLabel.toolTip = statusText
+        addressLabel.cell?.lineBreakMode = .byTruncatingTail
+        addressLabel.setContentCompressionResistancePriority(
+                .defaultLow, for: .horizontal)
+
         let metaStackView = NSStackView(views: [
             makeLabel(receiver.friendlyName, size: 14)
-          , makeLabel(statusText
-                  , size: NSFont.smallSystemFontSize
-                  , color: .secondaryLabelColor)
+          , addressLabel
         ])
 
         metaStackView.alignment = .leading

ext/src/ui/popup/index.tsx

@@ -229,15 +229,18 @@ class ReceiverEntry extends Component<ReceiverEntryProps, ReceiverEntryState> {
     }
 
     public render () {
+        const { application } = this.props.receiver.status;
+
         return (
             <li className="receiver">
                 <div className="receiver-name">
                     { this.props.receiver.friendlyName }
                 </div>
-                <div className="receiver-address">
-                    { this.props.receiver.status.application.isIdleScreen
+                <div className="receiver-address"
+                     title={ !application.isIdleScreen && application.statusText }>
+                    { application.isIdleScreen
                         ? `${this.props.receiver.host}:${this.props.receiver.port}`
-                        : this.props.receiver.status.application.statusText }
+                        : application.statusText }
                 </div>
                 <button className="receiver-connect"
                         onClick={ this.handleCast }

ext/src/ui/popup/styles/index.css

@@ -1,68 +1,67 @@
-body {
-    background: -moz-dialog;
-    color: -moz-dialogtext;
-    margin: initial;
-    font: message-box;
-}
-
-.media-select {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-    margin: 0 1em;
-    padding: 0.75em 0;
-}
-
-.media-select-dropdown {
-    display: inline-block;
-    margin: 0 0.5em;
-}
-
-.receivers {
-    list-style: none;
-    margin: initial;
-    padding: initial;
-}
-.receiver {
-    column-gap: 0.75em;
-    display: grid;
-    flex-direction: column;
-    grid-template-columns: min-content 1fr min-content;
-    grid-template-rows: min-content min-content 1fr;
-    grid-template-areas:
-        "name name connect"
-        "address status connect";
-    justify-content: center;
-    margin: 0 1em;
-    padding: 0.75em 0;
-    position: relative;
-}
-
-
-.receiver:not(:last-child) {
-    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
-}
-
-.receiver-name,
-.receiver-address {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.receiver-name {
-    font-size: 1.1em;
-    grid-area: name;
-}
-.receiver-address {
-    color: GrayText;
-    grid-area: address;
-}
-.receiver-status {
-    grid-area: status;
-}
-.receiver-connect {
-    align-self: center;
-    grid-area: connect;
-    justify-self: end;
-    min-width: 100px;
-    height: 32px;
-}
+body {
+    background: -moz-dialog;
+    color: -moz-dialogtext;
+    margin: initial;
+    font: message-box;
+}
+
+.media-select {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+    margin: 0 1em;
+    padding: 0.75em 0;
+}
+
+.media-select-dropdown {
+    display: inline-block;
+    margin: 0 0.5em;
+}
+
+.receivers {
+    list-style: none;
+    margin: initial;
+    padding: initial;
+}
+.receiver {
+    column-gap: 0.75em;
+    display: grid;
+    grid-template-columns: 1fr min-content;
+    grid-template-rows: min-content min-content 1fr;
+    grid-template-areas:
+        "name connect"
+        "address connect";
+    justify-content: center;
+    margin: 0 1em;
+    padding: 0.75em 0;
+    position: relative;
+}
+
+
+.receiver:not(:last-child) {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
+}
+
+.receiver-name,
+.receiver-address {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.receiver-name {
+    font-size: 1.1em;
+    grid-area: name;
+}
+.receiver-address {
+    color: GrayText;
+    grid-area: address;
+}
+.receiver-status {
+    grid-area: status;
+}
+.receiver-connect {
+    align-self: center;
+    grid-area: connect;
+    justify-self: end;
+    min-width: 100px;
+    height: 32px;
+}