Correct Title Component Layout

Correct Center text when Image is visible
Correct Single line vertical Alignment

src/css/livesplit.css

@@ -156,11 +156,15 @@ button.toggle-middle {
 }
 
 .title {
-    display: flex;
+    position: relative;
     height: 36px;
     width: 100%;
 }
 
+.justify-center {
+    justify-content: center;
+}
+
 .title > div >  span,
 div#lower-row > div {
     width: inherit;
@@ -172,7 +176,6 @@ span.title-game {
     width: calc(100% - 12px) !important;
     display: flex;
     height: 50%;
-    justify-content: center;
 }
 
 span.title-game,
@@ -180,11 +183,15 @@ div#lower-row {
     padding: 0px 6px;
 }
 
+div.run-meta.show-icon>.title-game.justify-center.game-title-center-fix {
+    padding-left: 40px;
+    width: calc(100% - 46px) !important;
+}
+
 div#lower-row > div.title-attempts {
     width: 40px;
     text-align: right;
     vertical-align: bottom;
-    padding-bottom: 4px;
 }
 
 div#lower-row > div.title-category {
@@ -192,7 +199,6 @@ div#lower-row > div.title-category {
     padding-left: 40px;
     display: inline-flex;
     align-items: center;
-    justify-content: center;
     height: 100%;
 }
 
@@ -223,6 +229,15 @@ div.meta-left > div#lower-row > div.title-category {
     justify-content: baseline;
 }
 
+div.meta-one-line {
+    height: 100%;
+}
+
+div.title-attempts {
+    position: absolute;
+    right: 6px;
+    bottom: 4px;
+}
 div.meta-two-lines > div#lower-row > div.title-category {
     align-items: baseline;
     vertical-align: top;
@@ -236,17 +251,22 @@ div.meta-two-lines > div#lower-row > div.title-attempts {
 }
 
 .game-icon-container {
-    flex: 1;
-    max-width: 40px;
-    min-width: 40px;
-    padding: 4px;
+    max-width: 34px;
+    min-width: 34px;
+    padding: 1px;
     height: auto;
+    position: absolute;
+    left: 0
 }
 
 .run-meta {
-    flex: 2;
     min-width: 0;
-    width: initial;
+    width: 100%;
+}
+
+.run-meta.meta-left.show-icon {
+    padding-left: 40px;
+    width: calc(100% - 40px);
 }
 
 .title-text,

src/layout/Title.tsx

@@ -7,11 +7,32 @@ export interface Props { state: LiveSplit.TitleComponentStateJson }
 
 export default class Title extends React.Component<Props> {
     private iconUrl: string;
+    private gameNameElement: React.RefObject<HTMLElement>;
 
     constructor(props: Props) {
         super(props);
 
         this.iconUrl = "";
+        this.gameNameElement = React.createRef();
+    }
+
+    public componentDidMount() {
+        const container = this.gameNameElement.current;
+        if (container === null) {
+            return;
+        }
+        if (this.getIconUrl() !== ""
+            && container.classList.contains("justify-center")
+            && container.parentElement != null
+            && container.offsetWidth > container.parentElement.offsetWidth - 100) {
+            if (!container.classList.contains("game-title-center-fix")) {
+                container.classList.add("game-title-center-fix");
+            }
+        } else {
+            if (container.classList.contains("game-title-center-fix")) {
+                container.classList.remove("game-title-center-fix");
+            }
+        }
     }
 
     public render() {
@@ -31,13 +52,18 @@ export default class Title extends React.Component<Props> {
         if (attemptsExist) {
             attemptsLabel += this.props.state.attempts;
         }
-
-        const icon = iconUrl !== "" ? (
+        const showIcon = iconUrl !== "";
+        const icon = showIcon ? (
             <div className="game-icon-container">
                 <img className="title-icon" src={iconUrl} />
             </div>
         ) : (<div style={{ display: "none" }} />);
 
+        const gameName = twoLines
+            ? <span ref={this.gameNameElement} className={"title-game" + (this.props.state.is_centered ? " justify-center" : "")}>
+                <div className="title-text">{this.props.state.line1}</div>
+            </span>
+            : <div style={{ display: "none" }} />;
         return (
             <div
                 className="title"
@@ -51,18 +77,18 @@ export default class Title extends React.Component<Props> {
                     className={
                         "run-meta"
                         + (!this.props.state.is_centered ? " meta-left" : "")
-                        + (twoLines ? " meta-two-lines" : "")
+                        + (twoLines ? " meta-two-lines" : " meta-one-line")
+                        + (showIcon ? " show-icon" : "")
                     }
                 >
                     {
-                        twoLines
-                            ? <span className="title-game">
-                                <div className="title-text">{this.props.state.line1}</div>
-                            </span>
-                            : <div style={{ display: "none" }} />
+                        gameName
                     }
                     <div id="lower-row" style={{ height: (twoLines ? "50%" : "100%") }}>
-                        <div className="title-category">
+                        <div className={
+                            "title-category"
+                            + (this.props.state.is_centered ? " justify-center" : "")
+                        }>
                             <div className="title-text">
                                 {twoLines ? this.props.state.line2 : this.props.state.line1}
                             </div>