fix header position

src/routes/Index.js

@@ -151,10 +151,10 @@ function Index({ children, messages, dispatch, client, language }) {
   );
   return (
     <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minHeight: '100%' }}>
-      <DocumentTitle title={messages.title || 'Moe Cube'}/>
+      <DocumentTitle title={messages.title || 'MoeCube'}/>
 
       {client !== 'electron' &&
-      <Header style={{ display: 'flex', alignItems: 'center' }}>
+      <Header style={{ display: 'flex', alignItems: 'center' }} className="mc-header">
         <Link to="/" style={{ marginTop: '20px' }}>
           <img alt="logo" src={logo} style={{ width: '140px', height: '44px' }}/>
         </Link>
@@ -182,7 +182,7 @@ function Index({ children, messages, dispatch, client, language }) {
           </Menu.Item>
         </Menu>
 
-        <div style={{ position: 'absolute', right: '40px' }}>
+        <div className="mc-userpanel">
           <UserPanel />
         </div>
       </Header>

src/routes/Index.less

-
 .particles {
   position: fixed;
   top: 0;
@@ -7,3 +6,18 @@
   width: 100%;
   height: 100%;
 }
+
+.mc-userpanel {
+  position: absolute;
+  right: 40px;
+}
+
+@media (max-width: 768px) {
+  .mc-header {
+    padding: 0 10px;
+  }
+
+  .mc-userpanel {
+    right: 10px;
+  }
+}
\ No newline at end of file