From 4f4d44c95e139c99555f9e50b6490524a9d65d8b Mon Sep 17 00:00:00 2001
From: Sergey Papushin <spapushin@gmail.com>
Date: Mon, 19 Feb 2018 19:01:35 -0600
Subject: [PATCH] Fix ellipses not appearing in Game/Category Name

Resolves #61
---
 src/css/livesplit.css |  8 ++++----
 src/layout/Title.tsx  | 18 +++++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/css/livesplit.css b/src/css/livesplit.css
index 695c83a..303dc94 100644
--- a/src/css/livesplit.css
+++ b/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;
diff --git a/src/layout/Title.tsx b/src/layout/Title.tsx
index db3d8b1..ea67b2b 100644
--- a/src/layout/Title.tsx
+++ b/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>