Merge branch 'fix-title-ellipses'

src/css/livesplit.css

@@ -132,7 +132,7 @@ div#lower-row > div {
 
 span.title-game {
     line-height: 19px;
-    width: 95% !important;
+    width: calc(100% - 12px) !important;
     display: flex;
     height: 50%;
     justify-content: center;
@@ -146,7 +146,6 @@ div#lower-row {
 div#lower-row > div.title-attempts {
     width: 40px;
     text-align: right;
-    display: inline-block;
     vertical-align: bottom;
     padding-bottom: 4px;
 }
@@ -213,8 +212,9 @@ div.meta-two-lines > div#lower-row > div.title-attempts {
     width: initial;
 }
 
-.run-meta > span,
-.run-meta > div#lower-row > div {
+.title-text,
+.title-attempts {
+    display: inline-block;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

src/layout/Title.tsx

@@ -49,19 +49,23 @@ export default class Title extends React.Component<Props> {
                 {icon}
                 <div
                     className={
-                        "run-meta" +
-                        (!this.props.state.is_centered ? " meta-left" : "") +
-                        (twoLines ? " meta-two-lines" : "")
+                        "run-meta"
+                        + (!this.props.state.is_centered ? " meta-left" : "")
+                        + (twoLines ? " meta-two-lines" : "")
                     }
                 >
                     {
-                        twoLines ?
-                            <span className="title-game">{this.props.state.line1}</span> :
-                            <div style={{ display: "none" }} />
+                        twoLines
+                            ? <span className="title-game">
+                                <div className="title-text">{this.props.state.line1}</div>
+                            </span>
+                            : <div style={{ display: "none" }} />
                     }
                     <div id="lower-row" style={{ height: (twoLines ? "50%" : "100%") }}>
                         <div className="title-category">
-                            {twoLines ? this.props.state.line2 : this.props.state.line1}
+                            <div className="title-text">
+                                {twoLines ? this.props.state.line2 : this.props.state.line1}
+                            </div>
                         </div>
                         <div className="title-attempts">{attemptsLabel}</div>
                     </div>