From 3ee8d6d0bee45db2eb2c57d1225de7e7de1eb381 Mon Sep 17 00:00:00 2001
From: hieutmd <hieu@glee.vn>
Date: Tue, 2 May 2023 15:15:45 +0700
Subject: [PATCH] ok

---
 src/App.tsx        | 41 +++++++++++++++++++++--------------------
 src/styles/app.css | 11 +++++++----
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d7ff28e..0adff3d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -140,9 +140,10 @@ const ShowUserSpace = ({openHelp}: {openHelp: () => any}) => {
 const App: FC<{ client_setting: ClientSettings }> = ({ client_setting }) => {
 
     const HEADER_HEIGHT = 70;
-    const [closeHelp, setHelpClose] = useState<boolean>(false);
-    const LAYOUT_CLOSED = closeHelp ? { width: 1200, marginLeft: 'auto', marginRight: 'auto' } : { marginTop: HEADER_HEIGHT, height: WINDOW_HEIGHT - HEADER_HEIGHT, overflow: 'auto' };
+    const [help_open, setHelpOpen] = useState<boolean>(false);
+    const LAYOUT_CLOSED = !help_open ? { width: 1200, marginLeft: 'auto', marginRight: 'auto' } : { marginTop: HEADER_HEIGHT, height: WINDOW_HEIGHT - HEADER_HEIGHT, overflow: 'auto' };
     const windowWidth = window.innerWidth;
+    const is_small_window = windowWidth <= 1366;
 
     return (
         <Layout className={'box-chatboard'}>
@@ -157,38 +158,38 @@ const App: FC<{ client_setting: ClientSettings }> = ({ client_setting }) => {
                         </div>
                     </Col>
                     {
-                        windowWidth <= 1366 ?
+                        is_small_window ?
                             <Col className={'content-chatboard-col'} span={20}>
                                 <Content className="contentCenter">
-                                    <ShowUserSpace openHelp={() => setHelpClose(true)} />
+                                    <ShowUserSpace openHelp={() => setHelpOpen(true)} />
                                 </Content>
                             </Col>
                             :
-                            <Col className={'content-chatboard-col content-chatboard-col-big'} span={14}>
+                            <Col className={'content-chatboard-col content-chatboard-col-big'} span={ help_open ? 14 : 20 }>
                                 <Content className="contentCenter">
-                                    <ShowUserSpace openHelp={() => setHelpClose(true)} />
+                                    <ShowUserSpace openHelp={() => setHelpOpen(true)} />
                                 </Content>
                             </Col>
                     }
 
                     {
-                        windowWidth <= 1366 ?
+                        help_open &&
                             (
-                                closeHelp &&
-                                <div className="fix-ab-ct-right" id="fix-ab-ct-right">
-                                    <div className="contentRight" >
-                                        <h2 className="contentRightHeader">Trợ giúp Admin <CloseOutlined onClick={() => setHelpClose(false)} title={'Đóng'} />   </h2>
-                                        <HelpSideBar />
+                                is_small_window ?
+                                    <div className="fix-ab-ct-right" id="fix-ab-ct-right">
+                                        <div className="contentRight" >
+                                            <h2 className="contentRightHeader">Trợ giúp Admin <CloseOutlined onClick={() => setHelpOpen(false)} title={'Đóng'} />   </h2>
+                                            <HelpSideBar />
+                                        </div>
                                     </div>
-                                </div>
+                                :
+                                    <Col className={'content-chatboard-col'} span={6}>
+                                        <div className="contentRight" >
+                                            <h2 className="contentRightHeader">Trợ giúp Admin <a onClick={() => setHelpOpen(false)}>Đóng</a></h2>
+                                            <HelpSideBar />
+                                        </div>
+                                    </Col>
                             )
-                            :
-                            <Col className={'content-chatboard-col'} span={6}>
-                                <div className="contentRight" >
-                                    <h2 className="contentRightHeader">Trợ giúp <a onClick={() => setHelpClose(false)}>Đóng</a></h2>
-                                    <HelpSideBar />
-                                </div>
-                            </Col>
                     }
                 </Row>
             </Layout>
diff --git a/src/styles/app.css b/src/styles/app.css
index c30f7e1..91171a0 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -54,11 +54,14 @@ code {
 
 /* use for SPAN in place of A tag */
 .box-chatboard {
+    max-width: 1800px;
+    margin-left: auto;
+    margin-right: auto;
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    float: left;
-    position: relative;
+    /*float: left;
+    position: relative;*/
 }
 
 .a-link {
@@ -705,11 +708,11 @@ code {
     display: block;
 }
 .content-chatboard-col-big .contentCenterHeaderAdmin {
-    display: none;
+    /*display: none;*/
 }
 @media (max-width: 1366px) {
     .contentCenterCtColRight .ant-tabs-content {
         max-height: 140px;
         min-height: 140px;
     }
-}
\ No newline at end of file
+}