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

@@ -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;
+  }
 }

tildes/scss/modules/_sidebar.scss

@@ -10,6 +10,10 @@
     width: 100%;
   }
 
+  .logged-in-user-info {
+    flex-direction: column;
+  }
+
   .sidebar-controls .btn {
     width: auto;
   }

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;
   }
 }