From 0a6a9121f083f113cac118c977fd2148a8ede24b Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Sun, 6 Sep 2020 18:52:56 -0700
Subject: [PATCH] fix wrapping when username is too long for the header bar

---
 src/app/PageLayout.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/app/PageLayout.js b/src/app/PageLayout.js
index 5e0b3b3..66b5662 100644
--- a/src/app/PageLayout.js
+++ b/src/app/PageLayout.js
@@ -20,8 +20,7 @@ function PageLayout({ children, hideHomeLink }) {
         marginBottom="6"
       >
         {!hideHomeLink && <HomeLink />}
-        <Box flex="1 0 0" />
-        <UserLoginLogout />
+        <UserLoginLogout marginLeft="auto" />
       </Box>
       {children}
     </Box>
@@ -69,7 +68,7 @@ function HomeLink() {
   );
 }
 
-function UserLoginLogout() {
+function UserLoginLogout(props) {
   const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
   const { id, username } = useCurrentUser();
 
@@ -79,8 +78,12 @@ function UserLoginLogout() {
 
   if (isAuthenticated) {
     return (
-      <HStack align="center" spacing="2">
-        {username && <Box fontSize="sm">Hi, {username}!</Box>}
+      <HStack align="center" spacing="2" {...props}>
+        {username && (
+          <Box fontSize="sm" textAlign="right">
+            Hi, {username}!
+          </Box>
+        )}
         <ColorModeToggleButton />
         {id && (
           <Button
@@ -103,7 +106,7 @@ function UserLoginLogout() {
     );
   } else {
     return (
-      <HStack align="center" spacing="2">
+      <HStack align="center" spacing="2" {...props}>
         <ColorModeToggleButton />
         <Button size="sm" variant="outline" onClick={() => loginWithRedirect()}>
           Log in