v1.0.0-beta/ styling fixes

src/Chat.js

@@ -183,25 +183,29 @@ export default class Chat extends Component {
     const { admin, name, messages, newMessage } = this.state;
     return (
       <div className="party-chat-container">
-        <Typography className="brand-title" variant="overline" display="block">
-          WATCH PARTY
-        </Typography>
-        <Typography className="room-title" variant="h4" gutterBottom>
-          {name}
-        </Typography>
-        <ButtonGroup className="party-controls" size="small" color="secondary" fullWidth>
-          <Button onClick={this.shareParty} startIcon={<Share />}>
-            Share
-          </Button>
-          <Button onClick={this.leaveParty} startIcon={<Exit />}>
-            Leave
-          </Button>
-          {admin && (
-            <Button onClick={this.endParty} startIcon={<Delete />}>
-              End Party
+        <div className="party-chat-header">
+          <div className="party-chat-header-text">
+            <Typography className="brand-title" variant="overline" display="block">
+              WATCH PARTY
+            </Typography>
+            <Typography className="room-title" variant="h4" gutterBottom>
+              {name}
+            </Typography>
+          </div>
+          <ButtonGroup className="party-controls" size="small" color="secondary">
+            <Button onClick={this.shareParty} startIcon={<Share />}>
+              <span className="party-control-button-text">Share</span>
             </Button>
-          )}
-        </ButtonGroup>
+            <Button onClick={this.leaveParty} startIcon={<Exit />}>
+              <span className="party-control-button-text">Leave</span>
+            </Button>
+            {admin && (
+              <Button onClick={this.endParty} startIcon={<Delete />}>
+                <span className="party-control-button-text">End Party</span>
+              </Button>
+            )}
+          </ButtonGroup>
+        </div>
         <div className="thread-container">
           <Thread messages={messages} />
         </div>

src/index.css

@@ -181,6 +181,12 @@ body.amazon-prime textarea:focus {
   margin-bottom: 1rem;
   margin-top: 1rem;
 }
+.room-title {
+  text-overflow: ellipsis !important;
+  word-break: break-all !important;
+  overflow: hidden !important;
+  padding-right: 1rem !important;
+}
 .room-title,
 .brand-title {
   padding-left: 3.5rem !important;
@@ -202,8 +208,16 @@ textarea::-webkit-scrollbar {
 .chat-message-box > div {
   border-radius: 26px;
 }
-
-.party-controls {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.party-chat-header {
+  display: flex;
+  align-items: center;
+}
+.party-chat-header-text {
+  flex: 1;
+}
+.party-control-button-text {
+  display: none;
+}
+.party-controls button:hover .party-control-button-text {
+  display: initial;
 }