From 607f17263f8e568f5e88fcc61282f7a447c4e10b Mon Sep 17 00:00:00 2001
From: Deimos <deimos@tildes.net>
Date: Mon, 18 Mar 2019 19:02:08 -0600
Subject: [PATCH] Rearrange notifications to prevent header resizing

Previously, the site's main content would be pushed down a little when
you have new comment notifications or messages. This moves them to the
left of the username instead, and uses a different flexbox arrangement
inside the sidebar when it's collapsed on smaller screens.
---
 tildes/scss/modules/_logged-in-user.scss | 11 +++++++----
 tildes/scss/modules/_sidebar.scss        |  4 ++++
 tildes/scss/modules/_site-header.scss    |  3 +--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/tildes/scss/modules/_logged-in-user.scss b/tildes/scss/modules/_logged-in-user.scss
index 8cd5d3d..bdbe52a 100644
--- a/tildes/scss/modules/_logged-in-user.scss
+++ b/tildes/scss/modules/_logged-in-user.scss
@@ -2,6 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-or-later
 
 .logged-in-user-info {
+  flex-direction: row-reverse;
+  align-items: center;
+
   font-size: 0.8rem;
 
   a {
@@ -9,14 +12,14 @@
 
     display: flex;
     align-items: center;
-
-    @media (min-width: $size-md) {
-      justify-content: right;
-    }
   }
 }
 
 .logged-in-user-alert {
   font-weight: bold;
   font-size: 0.5rem;
+
+  @media (min-width: $size-md) {
+    margin-right: 1rem;
+  }
 }
diff --git a/tildes/scss/modules/_sidebar.scss b/tildes/scss/modules/_sidebar.scss
index 2b56b75..3c8d18e 100644
--- a/tildes/scss/modules/_sidebar.scss
+++ b/tildes/scss/modules/_sidebar.scss
@@ -10,6 +10,10 @@
     width: 100%;
   }
 
+  .logged-in-user-info {
+    flex-direction: column;
+  }
+
   .sidebar-controls .btn {
     width: auto;
   }
diff --git a/tildes/scss/modules/_site-header.scss b/tildes/scss/modules/_site-header.scss
index d7d88e5..b6d3d2d 100644
--- a/tildes/scss/modules/_site-header.scss
+++ b/tildes/scss/modules/_site-header.scss
@@ -6,11 +6,10 @@
     // hidden on small screens
     display: none;
     @media (min-width: $show-sidebar-width) {
-      display: block;
+      display: flex;
     }
 
     margin-left: auto;
-    text-align: right;
   }
 }