changes

ui/src/components/Pages/SettingsPage/SettingsPage.sass

@@ -1,14 +1,17 @@
 @import "../../../variables.module"
 
-.settings-page
+@mixin tab-container
         max-width: 513px
+        margin: 0 auto
+
+.settings-page
+    background: #F7F9FC;
     display: flex;
     flex-direction: column;
     align-content: center;
-    justify-content: center;
+    /* justify-content: center; */
     margin: 0 auto;
-    
-
+    height: 100vh;
     
     & .tabs-nav
         padding-top: 0px;
@@ -16,8 +19,10 @@
 
 
 .header-section
-    margin-bottom: 30px;
-    background: #F7F9FC;
+    
+
+    &__container
+        @include tab-container
    
 
     &__title
@@ -27,3 +32,8 @@
         margin-bottom: 60px;
         margin-top: 20px;
 
+.tab-content
+    padding-top: 30px;
+    &__container
+        @include tab-container
+    

ui/src/components/Pages/SettingsPage/SettingsPage.tsx

@@ -14,11 +14,13 @@ const AdminSettings: React.FC<any> = ({color}) => {
     return (<>
         <div className="settings-page">
             <div className="header-section">
+                <div className="header-section__container">
                     <div className="header-section__title">Settings</div>
                     <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned classes={{root:"tabs-nav"}}/>
                 </div>
-        <div>
-        
+            </div>
+            <div className="tab-content">
+                <div className="tab-content__container">
                 {currentTab === TABS[0].tab && <React.Fragment>
                         <UserSettings/>
                     </React.Fragment>}
@@ -27,6 +29,7 @@ const AdminSettings: React.FC<any> = ({color}) => {
                 </React.Fragment>}
                 </div>
             </div>
+    </div>
     </>
     )
   }

ui/src/components/UserSettings/UserSettings.tsx

@@ -38,7 +38,7 @@ export const UserSettings : React.FC<Props> = ({}) => {
     const getUserList =         (async () => {
         try {
             let users = [{username:"asd",role:"Admin",status:"Active",userId : "1"},
-                           {username:"aaaaaaa",role:"User",status:"Active",userId : "2"}]//await api.getUsers() 
+                           {username:"asdasdasdasdasdasd",role:"User",status:"Active",userId : "2"}]//await api.getUsers() 
             setUserRows(users)                                
         } catch (e) {
             console.error(e);