From 69836ff4c844e01a1ba46391dad9d1423d8cbb3d Mon Sep 17 00:00:00 2001
From: Alex Komoroske <jkomoros@gmail.com>
Date: Tue, 25 Dec 2018 07:35:46 -0800
Subject: [PATCH] Fix the header sizing issue with a layout hack. Card is still
 broken. Part of #25.

---
 src/components/compendium-app.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/compendium-app.js b/src/components/compendium-app.js
index a9489df0..c92e65b3 100644
--- a/src/components/compendium-app.js
+++ b/src/components/compendium-app.js
@@ -94,9 +94,7 @@ class CompendiumApp extends connect(store)(LitElement) {
       .header {
         padding: 0 1em;
         box-sizing:border-box;
-        display:flex;
-        flex-direction:row;
-        align-items: center;
+
         width: 100%;
         text-align: center;
         background-color: var(--app-header-background-color);
@@ -104,6 +102,13 @@ class CompendiumApp extends connect(store)(LitElement) {
         border-bottom: 1px solid #eee;
       }
 
+      .header > .inner {
+        /* bug in many browsers with nested flexboxes; splitting like this fixes it. See issue #25 */
+        display:flex;
+        flex-direction:row;
+        align-items: center; 
+      }
+
       .spacer {
         flex-grow:1;
       }
@@ -164,15 +169,17 @@ class CompendiumApp extends connect(store)(LitElement) {
     <div class='container'>
       <!-- Header -->
       <div class='header'>
-        <div main-title>${this.appTitle}</div>
-        <div class='spacer'></div>
-        <nav class="toolbar-list">
-          <a ?selected="${this._page === 'c'}" href="/c">Explore</a>
-        </nav>
-        <div class='spacer dev'>
-          ${this._devMode ? html`DEVMODE` : ""}
+        <div class='inner'>
+          <div main-title>${this.appTitle}</div>
+          <div class='spacer'></div>
+          <nav class="toolbar-list">
+            <a ?selected="${this._page === 'c'}" href="/c">Explore</a>
+          </nav>
+          <div class='spacer dev'>
+            ${this._devMode ? html`DEVMODE` : ""}
+          </div>
+          <user-chip></user-chip>
         </div>
-        <user-chip></user-chip>
       </div>
 
       <!-- Main content -->