Fix TopBar double render, adjust auth-container width

src/App.less

@@ -65,11 +65,16 @@ html, body {
 }
 
 .small-container,
-.large-container {
+.large-container,
+.auth-container {
   padding: 20px;
   margin: 0 auto;
 }
 
+.auth-container {
+  max-width: 370px;
+}
+
 .small-container {
   max-width: 600px;
 }

src/components/TopBar.tsx

@@ -97,7 +97,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
     document.addEventListener('keydown', handleGlobalKeyboard);
 
     return () => document.removeEventListener('keydown', handleGlobalKeyboard);
-  });
+  }, [currentUser, handleGlobalKeyboard]);
 
   const tabs = useMemo(() => (
     <Col span={16} md={16} sm={16}>
@@ -217,7 +217,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
                   </SubMenu>
                 </Menu>
               }
-              placement="bottomCenter"
+              placement="bottom"
               trigger={['click']}
             >
               <Button icon={<CloudDownloadOutlined />}>
@@ -248,7 +248,7 @@ const TopBar = ({ tuneId }: { tuneId: string | null }) => {
                   )}
                 </Menu>
               }
-              placement="bottomCenter"
+              placement="bottom"
               trigger={['click']}
             >
               <Button icon={<UserOutlined />}>