From 8d7fdb93ac8b2387ec159df22b88fb33f74d408c Mon Sep 17 00:00:00 2001
From: turbodog03 <63595854+turbodog03@users.noreply.github.com>
Date: Fri, 23 Jul 2021 09:46:01 +0800
Subject: [PATCH] feat: fix header overflow and account disappear bug, improve
 UI, optimize touchscreen experience (#187)

Signed-off-by: turbodog03 <63595854+turbodog03@users.noreply.github.com>
---
 web/src/App.js                  | 116 +++++++++++++++++++++++---------
 web/src/App.less                |  19 +++++-
 web/src/ApplicationEditPage.js  |  24 ++-----
 web/src/ApplicationListPage.js  |  20 ++----
 web/src/LdapTable.js            |   2 +-
 web/src/OrganizationEditPage.js |  25 ++-----
 web/src/OrganizationListPage.js |  22 +++---
 web/src/ProviderEditPage.js     |  24 ++-----
 web/src/ProviderListPage.js     |  20 ++----
 web/src/RecordListPage.js       |  17 ++---
 web/src/SelectLanguageBox.js    |   6 +-
 web/src/TokenEditPage.js        |  24 ++-----
 web/src/TokenListPage.js        |  22 +++---
 web/src/UserEditPage.js         |  24 ++-----
 web/src/UserListPage.js         |  36 +++++-----
 web/src/basic/HomePage.js       |  11 +--
 16 files changed, 187 insertions(+), 225 deletions(-)

diff --git a/web/src/App.js b/web/src/App.js
index 90a4ff0b..c0335248 100644
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -17,7 +17,7 @@ import './App.less';
 import {Helmet} from "react-helmet";
 import * as Setting from "./Setting";
 import {DownOutlined, LogoutOutlined, SettingOutlined} from '@ant-design/icons';
-import {Avatar, BackTop, Dropdown, Layout, Menu} from 'antd';
+import {Avatar, BackTop, Dropdown, Layout, Menu, Card} from 'antd';
 import {Link, Redirect, Route, Switch, withRouter} from 'react-router-dom'
 import OrganizationListPage from "./OrganizationListPage";
 import OrganizationEditPage from "./OrganizationEditPage";
@@ -49,7 +49,7 @@ import SelectLanguageBox from './SelectLanguageBox';
 import i18next from 'i18next';
 import PromptPage from "./auth/PromptPage";
 
-const { Header, Footer } = Layout;
+const { Header, Footer, Content } = Layout;
 
 class App extends Component {
   constructor(props) {
@@ -230,6 +230,8 @@ class App extends Component {
     return (
       <Dropdown key="200" overlay={menu} className="rightDropDown">
         <div className="ant-dropdown-link" style={{float: 'right', cursor: 'pointer'}}>
+          &nbsp;
+          &nbsp;
           {
             this.renderAvatar()
           }
@@ -363,9 +365,38 @@ class App extends Component {
       window.location.pathname === '/';
   }
 
-  renderContent() {
-    return (
+  renderRouter(){
+    return(
       <div>
+      <Switch>
+      <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
+      <Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
+      <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} {...props} />)}/>
+      <Route exact path="/account" render={(props) => this.renderLoginIfNotLoggedIn(<AccountPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/organizations" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationListPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/organizations/:organizationName" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationEditPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/organizations/:organizationName/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/users/:organizationName/:userName" render={(props) => <UserEditPage account={this.state.account} {...props} />}/>
+      <Route exact path="/providers" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderListPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/providers/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/applications" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationListPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/applications/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationEditPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/ldap/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapEditPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/ldap/sync/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapSyncPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/tokens" render={(props) => this.renderLoginIfNotLoggedIn(<TokenListPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/tokens/:tokenName" render={(props) => this.renderLoginIfNotLoggedIn(<TokenEditPage account={this.state.account} {...props} />)}/>
+      <Route exact path="/records" render={(props) => this.renderLoginIfNotLoggedIn(<RecordListPage account={this.state.account} {...props} />)}/>
+    </Switch>
+    </div>
+    )
+  }
+
+  renderContent() {
+    if (!Setting.isMobile()) {
+    return (
+      <div style={{display: 'flex', flex: 'auto',width:"100%",flexDirection: 'column'}}>
+        <Layout style={{display: 'flex', alignItems: 'stretch'}}>
         <Header style={{ padding: '0', marginBottom: '3px'}}>
           {
             Setting.isMobile() ? null : (
@@ -378,40 +409,65 @@ class App extends Component {
             // theme="dark"
             mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
             selectedKeys={[`${this.state.selectedMenuKey}`]}
-            style={{ lineHeight: '64px' }}
+            style={{ lineHeight: '64px'}}
           >
             {
               this.renderMenu()
             }
-            {
-              this.renderAccount()
-            }
-          <SelectLanguageBox/>
+          <div style = {{float: 'right'}}>
+          {
+            this.renderAccount()
+          }
+        <SelectLanguageBox/>
+        </div>
           </Menu>
         </Header>
-        <Switch>
-          <Route exact path="/result" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
-          <Route exact path="/result/:applicationName" render={(props) => this.renderHomeIfLoggedIn(<ResultPage {...props} />)}/>
-          <Route exact path="/" render={(props) => this.renderLoginIfNotLoggedIn(<HomePage account={this.state.account} {...props} />)}/>
-          <Route exact path="/account" render={(props) => this.renderLoginIfNotLoggedIn(<AccountPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/organizations" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/organizations/:organizationName" render={(props) => this.renderLoginIfNotLoggedIn(<OrganizationEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/organizations/:organizationName/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/users" render={(props) => this.renderLoginIfNotLoggedIn(<UserListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/users/:organizationName/:userName" render={(props) => <UserEditPage account={this.state.account} {...props} />}/>
-          <Route exact path="/providers" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/providers/:providerName" render={(props) => this.renderLoginIfNotLoggedIn(<ProviderEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/applications" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/applications/:applicationName" render={(props) => this.renderLoginIfNotLoggedIn(<ApplicationEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/ldap/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/ldap/sync/:ldapId" render={(props) => this.renderLoginIfNotLoggedIn(<LdapSyncPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/tokens" render={(props) => this.renderLoginIfNotLoggedIn(<TokenListPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/tokens/:tokenName" render={(props) => this.renderLoginIfNotLoggedIn(<TokenEditPage account={this.state.account} {...props} />)}/>
-          <Route exact path="/records" render={(props) => this.renderLoginIfNotLoggedIn(<RecordListPage account={this.state.account} {...props} />)}/>
-        </Switch>
+        <Layout style={{backgroundColor: "#f5f5f5", alignItems: 'stretch'}}>
+          <Card className="content-warp-card">
+            {
+            this.renderRouter()
+            }
+          </Card>
+        </Layout>
+        </Layout>
       </div>
     )
+  } else {
+    return(
+      <div>
+      <Header style={{ padding: '0', marginBottom: '3px'}}>
+        {
+          Setting.isMobile() ? null : (
+            <Link to={"/"}>
+              <div className="logo" />
+            </Link>
+          )
+        }
+        <Menu
+          // theme="dark"
+          mode={(Setting.isMobile() && this.isStartPages()) ? "inline" : "horizontal"}
+          selectedKeys={[`${this.state.selectedMenuKey}`]}
+          style={{ lineHeight: '64px' }}
+        >
+          {
+            this.renderMenu()
+          }
+          <div style = {{float: 'right'}}>
+          {
+            this.renderAccount()
+          }
+          <SelectLanguageBox/>
+        </div>
+        </Menu>
+      </Header>
+      {
+        this.renderRouter()
+      }
+    </div>
+    )
   }
+}
+
 
   renderFooter() {
     // How to keep your footer where it belongs ?
@@ -460,7 +516,7 @@ class App extends Component {
       <div id="parent-area">
         <BackTop />
         <CustomGithubCorner />
-        <div id="content-wrap">
+        <div id="content-wrap" style={{flexDirection: "column"}}>
           {
             this.renderContent()
           }
diff --git a/web/src/App.less b/web/src/App.less
index 68ae3cfd..21c44432 100644
--- a/web/src/App.less
+++ b/web/src/App.less
@@ -27,10 +27,15 @@
 #parent-area {
   position: relative;
   min-height: 100vh;
+  background-color: #f5f5f5;
+  display: flex;
 }
 
 #content-wrap {
   padding-bottom: 70px;    /* Footer height */
+  display: flex;
+  align-items: stretch;
+  width: 100%;
 }
 
 #footer {
@@ -43,9 +48,10 @@
 .language_box {
   background: url("https://cdn.casbin.org/img/muti_language.svg");
   background-size: 25px, 25px;
-  width: 25px;
-  height: 25px;
-  margin: 22px 20px 16px 20px;
+  background-position: center;
+  background-repeat:no-repeat;
+  width: 45px;
+  height: 65px;
   float: right;
   cursor: pointer;
   &:hover {
@@ -58,3 +64,10 @@
     background-color: #f5f5f5;
   }
 }
+
+.content-warp-card{
+  box-shadow: 0 1px 5px 0 rgba(51, 51, 51, 0.14);
+  margin: 5px 5px 5px 5px;
+  flex:1;
+  align-items: stretch;
+}
diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index e86d27ac..66463281 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -411,25 +411,13 @@ class ApplicationEditPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.state.application !== null ? this.renderApplication() : null
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
-        <Row style={{margin: 10}}>
-          <Col span={2}>
-          </Col>
-          <Col span={18}>
-            <Button type="primary" size="large" onClick={this.submitApplicationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
-          </Col>
-        </Row>
+      {
+        this.state.application !== null ? this.renderApplication() : null
+      }
+      <div style={{marginTop: '20px', marginLeft: '40px'}}>
+        <Button type="primary" size="large" onClick={this.submitApplicationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
       </div>
+    </div>
     );
   }
 }
diff --git a/web/src/ApplicationListPage.js b/web/src/ApplicationListPage.js
index 03f3172b..317164b2 100644
--- a/web/src/ApplicationListPage.js
+++ b/web/src/ApplicationListPage.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, List, Popconfirm, Row, Table, Tooltip} from 'antd';
+import {Button, List, Popconfirm, Table, Tooltip} from 'antd';
 import {EditOutlined} from "@ant-design/icons";
 import moment from "moment";
 import * as Setting from "./Setting";
@@ -104,6 +104,7 @@ class ApplicationListPage extends React.Component {
         dataIndex: 'name',
         key: 'name',
         width: '150px',
+        fixed: 'left',
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
@@ -195,6 +196,7 @@ class ApplicationListPage extends React.Component {
         dataIndex: '',
         key: 'op',
         width: '170px',
+        fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
@@ -213,7 +215,7 @@ class ApplicationListPage extends React.Component {
 
     return (
       <div>
-        <Table columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={applications} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
                title={() => (
                  <div>
                   {i18next.t("general:Applications")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -229,17 +231,9 @@ class ApplicationListPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.renderTable(this.state.applications)
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
+        {
+          this.renderTable(this.state.applications)
+        }
       </div>
     );
   }
diff --git a/web/src/LdapTable.js b/web/src/LdapTable.js
index 589ee959..1943dece 100644
--- a/web/src/LdapTable.js
+++ b/web/src/LdapTable.js
@@ -171,7 +171,7 @@ class LdapTable extends React.Component {
     ];
 
     return (
-      <Table rowKey="id" columns={columns} dataSource={table} size="middle" bordered pagination={false}
+      <Table scroll={{x: 'max-content'}} rowKey="id" columns={columns} dataSource={table} size="middle" bordered pagination={false}
              title={() => (
                <div>
                  {this.props.title}&nbsp;&nbsp;&nbsp;&nbsp;
diff --git a/web/src/OrganizationEditPage.js b/web/src/OrganizationEditPage.js
index 77639638..09be29fa 100644
--- a/web/src/OrganizationEditPage.js
+++ b/web/src/OrganizationEditPage.js
@@ -246,25 +246,12 @@ class OrganizationEditPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.state.organization !== null ? this.renderOrganization() : null
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
-        <Row style={{margin: 10}}>
-          <Col span={2}>
-          </Col>
-          <Col span={18}>
-            <Button type="primary" size="large"
-                    onClick={this.submitOrganizationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
-          </Col>
-        </Row>
+        {
+          this.state.organization !== null ? this.renderOrganization() : null
+        }
+        <div style={{marginTop: '20px', marginLeft: '40px'}}>
+          <Button type="primary" size="large" onClick={this.submitOrganizationEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+        </div>
       </div>
     );
   }
diff --git a/web/src/OrganizationListPage.js b/web/src/OrganizationListPage.js
index c465557d..0237fa97 100644
--- a/web/src/OrganizationListPage.js
+++ b/web/src/OrganizationListPage.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, Popconfirm, Row, Table} from 'antd';
+import {Button, Popconfirm, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as OrganizationBackend from "./backend/OrganizationBackend";
@@ -93,6 +93,7 @@ class OrganizationListPage extends React.Component {
         dataIndex: 'name',
         key: 'name',
         width: '120px',
+        fixed: 'left',
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
@@ -150,7 +151,7 @@ class OrganizationListPage extends React.Component {
         title: i18next.t("general:Password type"),
         dataIndex: 'passwordType',
         key: 'passwordType',
-        width: '150px',
+        width: '100px',
         sorter: (a, b) => a.passwordType.localeCompare(b.passwordType),
       },
       {
@@ -178,6 +179,7 @@ class OrganizationListPage extends React.Component {
         dataIndex: '',
         key: 'op',
         width: '240px',
+        fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
@@ -197,7 +199,7 @@ class OrganizationListPage extends React.Component {
 
     return (
       <div>
-        <Table columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={organizations} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
                title={() => (
                  <div>
                   {i18next.t("general:Organizations")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -213,17 +215,9 @@ class OrganizationListPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.renderTable(this.state.organizations)
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
+        {
+          this.renderTable(this.state.organizations)
+        }
       </div>
     );
   }
diff --git a/web/src/ProviderEditPage.js b/web/src/ProviderEditPage.js
index 18b949b2..48c8ef7e 100644
--- a/web/src/ProviderEditPage.js
+++ b/web/src/ProviderEditPage.js
@@ -309,24 +309,12 @@ class ProviderEditPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.state.provider !== null ? this.renderProvider() : null
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
-        <Row style={{margin: 10}}>
-          <Col span={2}>
-          </Col>
-          <Col span={18}>
-            <Button type="primary" size="large" onClick={this.submitProviderEdit.bind(this)}>{i18next.t("general:Save")}</Button>
-          </Col>
-        </Row>
+        {
+          this.state.provider !== null ? this.renderProvider() : null
+        }
+        <div style={{marginTop: '20px', marginLeft: '40px'}}>
+          <Button type="primary" size="large" onClick={this.submitProviderEdit.bind(this)}>{i18next.t("general:Save")}</Button>
+        </div>
       </div>
     );
   }
diff --git a/web/src/ProviderListPage.js b/web/src/ProviderListPage.js
index 014b89a3..fc921b7b 100644
--- a/web/src/ProviderListPage.js
+++ b/web/src/ProviderListPage.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, Popconfirm, Row, Table} from 'antd';
+import {Button, Popconfirm, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as ProviderBackend from "./backend/ProviderBackend";
@@ -96,6 +96,7 @@ class ProviderListPage extends React.Component {
         dataIndex: 'name',
         key: 'name',
         width: '120px',
+        fixed: 'left',
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
@@ -183,6 +184,7 @@ class ProviderListPage extends React.Component {
         dataIndex: '',
         key: 'op',
         width: '170px',
+        fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
@@ -201,7 +203,7 @@ class ProviderListPage extends React.Component {
 
     return (
       <div>
-        <Table columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={providers} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
                title={() => (
                  <div>
                    {i18next.t("general:Providers")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -217,17 +219,9 @@ class ProviderListPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.renderTable(this.state.providers)
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
+        {
+          this.renderTable(this.state.providers)
+        }
       </div>
     );
   }
diff --git a/web/src/RecordListPage.js b/web/src/RecordListPage.js
index e91a7722..2e305128 100644
--- a/web/src/RecordListPage.js
+++ b/web/src/RecordListPage.js
@@ -62,6 +62,7 @@ class RecordListPage extends React.Component {
         dataIndex: ['Record', 'clientIp'],
         key: 'id',
         width: '120px',
+        fixed: 'left',
         sorter: (a, b) => a.Record.clientIp.localeCompare(b.Record.clientIp),
         render: (text, record, index) => {
           return text;
@@ -125,7 +126,7 @@ class RecordListPage extends React.Component {
 
     return (
       <div>
-        <Table columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={{pageSize: 100}}
+        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={records} rowKey="id" size="middle" bordered pagination={{pageSize: 100}}
                title={() => (
                  <div>
                    {i18next.t("general:Records")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -140,17 +141,9 @@ class RecordListPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.renderTable(this.state.records)
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
+        {
+          this.renderTable(this.state.records)
+        }
       </div>
     );
   }
diff --git a/web/src/SelectLanguageBox.js b/web/src/SelectLanguageBox.js
index a9d924c9..7642dfe8 100644
--- a/web/src/SelectLanguageBox.js
+++ b/web/src/SelectLanguageBox.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import * as Setting from "./Setting";
-import { Menu, Dropdown, message } from "antd";
+import { Menu, Dropdown} from "antd";
 import { createFromIconfontCN } from '@ant-design/icons';
 import './App.less';
 
@@ -48,8 +48,8 @@ class SelectLanguageBox extends React.Component {
     );
 
     return (
-      <Dropdown overlay={menu} style={{cursor: "pointer"}}>
-        <span className="language_box" />
+      <Dropdown overlay={menu} >
+        <div className="language_box" />
       </Dropdown>
     );
   }
diff --git a/web/src/TokenEditPage.js b/web/src/TokenEditPage.js
index 4c42dc27..0a8298da 100644
--- a/web/src/TokenEditPage.js
+++ b/web/src/TokenEditPage.js
@@ -163,25 +163,13 @@ class TokenEditPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.state.token !== null ? this.renderToken() : null
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
-        <Row style={{margin: 10}}>
-          <Col span={2}>
-          </Col>
-          <Col span={18}>
-            <Button type="primary" size="large" onClick={this.submitTokenEdit.bind(this)}>{i18next.t("general:Save")}</Button>
-          </Col>
-        </Row>
+      {
+        this.state.token !== null ? this.renderToken() : null
+      }
+      <div style={{marginTop: '20px', marginLeft: '40px'}}>
+        <Button type="primary" size="large" onClick={this.submitTokenEdit.bind(this)}>{i18next.t("general:Save")}</Button>
       </div>
+    </div>
     );
   }
 }
diff --git a/web/src/TokenListPage.js b/web/src/TokenListPage.js
index b8ebda37..5e3e9497 100644
--- a/web/src/TokenListPage.js
+++ b/web/src/TokenListPage.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, Popconfirm, Row, Table} from 'antd';
+import {Button, Popconfirm, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as TokenBackend from "./backend/TokenBackend";
@@ -90,7 +90,8 @@ class TokenListPage extends React.Component {
         title: i18next.t("general:Name"),
         dataIndex: 'name',
         key: 'name',
-        width: '300px',
+        width: (Setting.isMobile()) ? "100px" : "300px",
+        fixed: 'left',
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
@@ -199,6 +200,7 @@ class TokenListPage extends React.Component {
         dataIndex: '',
         key: 'op',
         width: '170px',
+        fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
@@ -217,7 +219,7 @@ class TokenListPage extends React.Component {
 
     return (
       <div>
-        <Table columns={columns} dataSource={tokens} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+        <Table scroll={{x: 'max-content'}} columns={columns} dataSource={tokens} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
                title={() => (
                  <div>
                    {i18next.t("general:Tokens")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -233,17 +235,9 @@ class TokenListPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.renderTable(this.state.tokens)
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
+        {
+          this.renderTable(this.state.tokens)
+        }
       </div>
     );
   }
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index fe7267a8..56fb9290 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -337,25 +337,13 @@ class UserEditPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.state.user !== null ? this.renderUser() : null
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
-        <Row style={{margin: 10}}>
-          <Col span={2}>
-          </Col>
-          <Col span={18}>
-            <Button type="primary" size="large" onClick={this.submitUserEdit.bind(this)}>{i18next.t("general:Save")}</Button>
-          </Col>
-        </Row>
+      {
+        this.state.user !== null ? this.renderUser() : null
+      }
+      <div style={{marginTop: '20px', marginLeft: '40px'}}>
+        <Button type="primary" size="large" onClick={this.submitUserEdit.bind(this)}>{i18next.t("general:Save")}</Button>
       </div>
+    </div>
     );
   }
 }
diff --git a/web/src/UserListPage.js b/web/src/UserListPage.js
index 02bcedc6..30cc8cad 100644
--- a/web/src/UserListPage.js
+++ b/web/src/UserListPage.js
@@ -14,7 +14,7 @@
 
 import React from "react";
 import {Link} from "react-router-dom";
-import {Button, Col, Popconfirm, Row, Switch, Table} from 'antd';
+import {Button, Popconfirm, Switch, Table} from 'antd';
 import moment from "moment";
 import * as Setting from "./Setting";
 import * as UserBackend from "./backend/UserBackend";
@@ -108,7 +108,8 @@ class UserListPage extends React.Component {
         title: i18next.t("general:Organization"),
         dataIndex: 'owner',
         key: 'owner',
-        width: '120px',
+        width: (Setting.isMobile()) ? "100px" : "120px",
+        fixed: 'left',
         sorter: (a, b) => a.owner.localeCompare(b.owner),
         render: (text, record, index) => {
           return (
@@ -122,7 +123,8 @@ class UserListPage extends React.Component {
         title: i18next.t("general:Name"),
         dataIndex: 'name',
         key: 'name',
-        width: '100px',
+        width: (Setting.isMobile()) ? "80px" : "100px",
+        fixed: 'left',
         sorter: (a, b) => a.name.localeCompare(b.name),
         render: (text, record, index) => {
           return (
@@ -136,7 +138,7 @@ class UserListPage extends React.Component {
         title: i18next.t("general:Created time"),
         dataIndex: 'createdTime',
         key: 'createdTime',
-        width: '160px',
+        width: '180px',
         sorter: (a, b) => a.createdTime.localeCompare(b.createdTime),
         render: (text, record, index) => {
           return Setting.getFormattedDate(text);
@@ -153,7 +155,7 @@ class UserListPage extends React.Component {
         title: i18next.t("general:Avatar"),
         dataIndex: 'avatar',
         key: 'avatar',
-        width: '100px',
+        width: '80px',
         render: (text, record, index) => {
           return (
             <a target="_blank" rel="noreferrer" href={text}>
@@ -208,7 +210,7 @@ class UserListPage extends React.Component {
         title: i18next.t("user:Is admin"),
         dataIndex: 'isAdmin',
         key: 'isAdmin',
-        width: '120px',
+        width: '100px',
         sorter: (a, b) => a.isAdmin - b.isAdmin,
         render: (text, record, index) => {
           return (
@@ -220,7 +222,7 @@ class UserListPage extends React.Component {
         title: i18next.t("user:Is global admin"),
         dataIndex: 'isGlobalAdmin',
         key: 'isGlobalAdmin',
-        width: '120px',
+        width: '100px',
         sorter: (a, b) => a.isGlobalAdmin - b.isGlobalAdmin,
         render: (text, record, index) => {
           return (
@@ -232,7 +234,7 @@ class UserListPage extends React.Component {
         title: i18next.t("user:Is forbidden"),
         dataIndex: 'isForbidden',
         key: 'isForbidden',
-        width: '120px',
+        width: '100px',
         sorter: (a, b) => a.isForbidden - b.isForbidden,
         render: (text, record, index) => {
           return (
@@ -245,7 +247,7 @@ class UserListPage extends React.Component {
         dataIndex: '',
         key: 'op',
         width: '190px',
-        fixed: 'right',
+        fixed: (Setting.isMobile()) ? "false" : "right",
         render: (text, record, index) => {
           return (
             <div>
@@ -264,7 +266,7 @@ class UserListPage extends React.Component {
 
     return (
       <div>
-        <Table columns={columns} scroll={{x: 1300}} dataSource={users} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
+        <Table scroll={{x: 'max-content'}} columns={columns} scroll={{x: 1300}} dataSource={users} rowKey="name" size="middle" bordered pagination={{pageSize: 100}}
                title={() => (
                  <div>
                   {i18next.t("general:Users")}&nbsp;&nbsp;&nbsp;&nbsp;
@@ -280,17 +282,9 @@ class UserListPage extends React.Component {
   render() {
     return (
       <div>
-        <Row style={{width: "100%"}}>
-          <Col span={1}>
-          </Col>
-          <Col span={22}>
-            {
-              this.renderTable(this.state.users)
-            }
-          </Col>
-          <Col span={1}>
-          </Col>
-        </Row>
+        {
+          this.renderTable(this.state.users)
+        }
       </div>
     );
   }
diff --git a/web/src/basic/HomePage.js b/web/src/basic/HomePage.js
index 6e281b08..f7d32ffc 100644
--- a/web/src/basic/HomePage.js
+++ b/web/src/basic/HomePage.js
@@ -70,11 +70,7 @@ class HomePage extends React.Component {
       )
     } else {
       return (
-        <div>
-          <Row>
-            <Col span={1}>
-            </Col>
-            <Col span={22}>
+        <div style={{marginRight:'15px',marginLeft:'15px'}}>
               <Row style={{marginLeft: "-20px", marginRight: "-20px", marginTop: "20px"}} gutter={24}>
                 {
                   items.map(item => {
@@ -84,10 +80,6 @@ class HomePage extends React.Component {
                   })
                 }
               </Row>
-            </Col>
-            <Col span={1}>
-            </Col>
-          </Row>
         </div>
       )
     }
@@ -96,7 +88,6 @@ class HomePage extends React.Component {
   render() {
     return (
       <div>
-        &nbsp;
         <Row style={{width: "100%"}}>
           <Col span={24} style={{display: "flex", justifyContent:  "center"}} >
             {