From a6047e0ad5820e08308d3c7d5f54c14ba57fca5e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 3 Sep 2018 22:12:18 +0300
Subject: [PATCH] Kinda went back to using align-items: stretch. Fixed error
 message floating.

---
 src/App.scss                                  | 23 ++++++++++++++++---
 .../notifications/notifications.scss          |  4 ----
 src/components/timeline/timeline.vue          | 12 +++-------
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index dd43c5ca..6ae4a1bb 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -325,18 +325,35 @@ main-router {
   background-size: cover;
   padding: .6em .6em;
   text-align: left;
-  font-size: 1.3em;
-  line-height: 24px;
+  line-height: 28px;
   background-color: $fallback--btn;
   background-color: var(--btn, $fallback--btn);
   align-items: baseline;
 
   .title {
     flex: 1 0 auto;
+    font-size: 1.3em;
+  }
+
+  .alert {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: hidden;
   }
 
   button {
-    height: 100%;
+    flex-shrink: 0;
+  }
+
+  button, .alert {
+    // height: 100%;
+    line-height: 21px;
+    min-height: 0;
+    box-sizing: border-box;
+    margin: 0;
+    margin-left: .25em;
+    min-width: 1px;
+    align-self: stretch;
   }
 }
 
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 4dbceede..a137ccd5 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -22,10 +22,6 @@
   }
 
   .loadmore-error {
-    min-width: 6em;
-    text-align: center;
-    padding: 0 0.25em 0 0.25em;
-    margin: 0;
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e42c0c4b..2dd4376a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -4,12 +4,12 @@
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
-        {{$t('timeline.show_new')}}{{newStatusCountStr}}
-      </button>
       <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
         {{$t('timeline.error_fetching')}}
       </div>
+      <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+        {{$t('timeline.show_new')}}{{newStatusCountStr}}
+      </button>
       <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.up_to_date')}}
       </div>
@@ -58,7 +58,6 @@
 
 .timeline {
   .loadmore-text {
-    font-size: 14px;
     opacity: 0.8;
     background-color: transparent;
     color: $fallback--faint;
@@ -66,11 +65,6 @@
   }
 
   .loadmore-error {
-    font-size: 14px;
-    min-width: 6em;
-    text-align: center;
-    padding: 0 0.25em 0 0.25em;
-    margin: 0;
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
   }