Fix rendering of spinner

flipdot · Nov 12, 2024 · 3f0d5ec · 3f0d5ec
1 parent acf5887
commit 3f0d5ec
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/src/NavBar.css b/src/NavBar.css
@@ -58,7 +58,6 @@
 
 .navbar ul.nav-links > li > * {
     flex: 1;
-    text-align: right;
 }
 
 .navbar ul.nav-links li ul {

diff --git a/src/NavBar.tsx b/src/NavBar.tsx
@@ -11,14 +11,18 @@ function NavBar() {
         <span className="title" style={{
             lineHeight: "1.1em",
             overflow: "hidden",
+            textAlign: "right",
         }}>{auth.user?.profile.preferred_username}</span>
         <ul>
             <li>
                 <button onClick={auth.logout}>Logout</button>
             </li>
         </ul>
     </>
-    const rightItem = auth.user === undefined ? <Spinner/> : auth.user ? userMenu : loginButton;
+    const alignedSpinner = <span style={{
+        textAlign: "right",
+    }}><Spinner/></span>
+    const rightItem = auth.user === undefined ? alignedSpinner : auth.user ? userMenu : loginButton;
     return (
         <nav className="navbar">
             <Link to="/" className="logo"><img src={fdLogo} alt="fd" onError={