Fix width and height issues

Fixed the width and height issues of capella and default views
couchbaselabs · Jun 4, 2024 · eb944b1 · eb944b1
1 parent 62042e0
commit eb944b1
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 10 deletions.
diff --git a/client/src/components/main/DefaultMain.tsx b/client/src/components/main/DefaultMain.tsx
@@ -6,7 +6,7 @@ import React from "react";
 
 const DefaultMain: React.FC = () => {
     return (
-        <Box component="main" sx={{ flexGrow: 1}}>
+        <Box component="main" sx={{ width: "80%" }}>
             <Box sx={{
                 height: '20%', /* Chart takes up 30% of the height */
                 width: '100%',

diff --git a/client/src/components/main/MainSection.tsx b/client/src/components/main/MainSection.tsx
@@ -2,7 +2,7 @@ import {useAppContext} from "../../context/context.tsx";
 import SiderComponent from "../sidebar/SideBar.tsx";
 import CapellaMain from "./CapellaMain.tsx";
 import DefaultMain from "./DefaultMain.tsx";
-import {Stack} from "@mui/material";
+import {Box, Stack} from "@mui/material";
 import React from "react";
 
 const MainSection: React.FC = () => {
@@ -14,7 +14,9 @@ const MainSection: React.FC = () => {
             <SiderComponent/>
             {
                 product === "capella"? (
-                    <CapellaMain />
+                    <Box sx={{ width: '80%'}}>
+                        <CapellaMain />
+                    </Box>
                 ) : (
                     <DefaultMain />
                 )

diff --git a/client/src/components/navbar/AppBar.tsx b/client/src/components/navbar/AppBar.tsx
@@ -1,8 +1,6 @@
 import { AppBar, Toolbar, Typography, Box } from "@mui/material";
 import LeaderboardIcon from '@mui/icons-material/Leaderboard';
-import {useState} from "react";
 import { ProductMenu } from "./ProductMenu";
-import UserMenu from "./UserMenu";
 import VersionMenu from "./VersionMenu";
 import Styles from "./styles";
 import {FilterMenu} from "./FilterMenu";
@@ -11,14 +9,14 @@ import {useAppContext} from "../../context/context.tsx";
 const AppBarComponent: React.FC = () => {
   //const [selectedProd, setSelectedProd] = useState(Products.indexOf(localStorage.getItem('scope') || ""));
   //const [version, setVersion] = useState<string>(versions[0]);
-  const [isLoggedIn, setLoggedIn] = useState(false);
-  const [userName, setUserName] = useState('');
+ /* const [isLoggedIn, setLoggedIn] = useState(false);
+  const [userName, setUserName] = useState('');*/
   const buildsFilterItems = [5, 10, 25];
   const runsFilterItems = [0, 2000, 5000, 10000];
   const appContext = useAppContext();
   const product = appContext.scope;
 
-  const handleLogin = (response: any) => {
+  /*const handleLogin = (response: any) => {
     setLoggedIn(true);
     setUserName(response.profileObj.name);
     localStorage.setItem("user", response.profileObj.name);
@@ -28,7 +26,7 @@ const AppBarComponent: React.FC = () => {
     setLoggedIn(false);
     setUserName('');
     localStorage.setItem("user", "");
-  };
+  };*/
 
   return (
     <AppBar position="absolute" sx={Styles.toolBar} >
@@ -47,7 +45,7 @@ const AppBarComponent: React.FC = () => {
                         <FilterMenu title="Runs" items={runsFilterItems} scopeVariable='runFilter' scopeAction='runFilterChanged' />
                     </>
                 )}
-                <UserMenu isLoggedIn={isLoggedIn} userName={userName} handleLogin={handleLogin} handleLogout={handleLogout} />
+                {/*<UserMenu isLoggedIn={isLoggedIn} userName={userName} handleLogin={handleLogin} handleLogout={handleLogout} />*/}
             </Box>
         </Toolbar>
     </AppBar>