diff --git a/src/App.less b/src/App.less
index b499f4e..37fe173 100644
--- a/src/App.less
+++ b/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;
 }
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
index 5ef847c..a7e518e 100644
--- a/src/components/TopBar.tsx
+++ b/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 />}>