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

@@ -24,12 +24,11 @@ body {
 .receiver {
     column-gap: 0.75em;
     display: grid;
-    flex-direction: column;
-    grid-template-columns: min-content 1fr min-content;
+    grid-template-columns: 1fr min-content;
     grid-template-rows: min-content min-content 1fr;
     grid-template-areas:
-        "name name connect"
-        "address status connect";
+        "name connect"
+        "address connect";
     justify-content: center;
     margin: 0 1em;
     padding: 0.75em 0;