Remove scrollbars by removing overflow: scroll in places. Add a title for hover over on long (or otherwise) topics.

skins/base/css/molecules/RoomHeader.css

@@ -127,7 +127,8 @@ limitations under the License.
     font-weight: 300;  
     padding-left: 16px;
     padding-right: 16px;
-    overflow-y: scroll;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .mx_RoomHeader_avatar {

skins/base/css/organisms/RoomView.css

@@ -54,7 +54,6 @@ limitations under the License.
 
     border-bottom: 1px solid #a8dbf3;
 
-    overflow: scroll;
     -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
 }

skins/base/views/molecules/RoomHeader.js

@@ -82,7 +82,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_name">
                         <EditableText label={this.props.room.name} initialValue={actual_name} placeHolder="Name" onValueChanged={this.onNameChange} />
                     </div>
-                if (topic) topic_el = <div className="mx_RoomHeader_topic">{ topic.getContent().topic }</div>;
+                if (topic) topic_el = <div className="mx_RoomHeader_topic" title={topic.getContent().topic}>{ topic.getContent().topic }</div>;
                 settings_button = (
                     <div className="mx_RoomHeader_button" onClick={this.props.onSettingsClick}>
                         <img src="img/settings.png" width="32" height="32"/>