Wrap hostname line in connection panel marquee

2 files changed, 6 insertions, 3 deletions

diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx
index 57b5d1e02a..65a47ea1b3 100644
--- a/gui/src/renderer/components/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/ConnectionPanel.tsx
@@ -11,6 +11,7 @@ import {
 } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import { default as ConnectionPanelDisclosure } from '../components/ConnectionPanelDisclosure';
+import Marquee from './Marquee';
 
 export interface IEndpoint {
   ip: string;
@@ -82,7 +83,7 @@ export default class ConnectionPanel extends React.Component<IProps> {
         {this.props.hostname && (
           <Header>
             <ConnectionPanelDisclosure pointsUp={this.props.isOpen} onToggle={this.props.onToggle}>
-              {this.hostnameLine()}
+              <Marquee>{this.hostnameLine()}</Marquee>
             </ConnectionPanelDisclosure>
           </Header>
         )}
diff --git a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
index ad7c092f9c..d0727ddb6f 100644
--- a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
+++ b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
@@ -6,13 +6,15 @@ import ImageView from './ImageView';
 const Container = styled.div({
   display: 'flex',
   alignItems: 'center',
+  width: '100%',
 });
 
-const Caption = styled.span((props: { open: boolean }) => ({
+const Caption = styled.span({}, (props: { open: boolean }) => ({
   fontFamily: 'Open Sans',
   fontSize: '15px',
   fontWeight: 600,
   lineHeight: '20px',
+  minWidth: '0px',
   color: props.open ? colors.white : colors.white40,
   [Container + ':hover &']: {
     color: colors.white,
@@ -28,7 +30,7 @@ const Chevron = styled(ImageView)({
 interface IProps {
   pointsUp: boolean;
   onToggle?: () => void;
-  children: React.ReactText;
+  children: React.ReactNode;
   className?: string;
 }