From 8ab32ca61d885567bafeae8d3e7211976dbd2629 Mon Sep 17 00:00:00 2001
From: Aiga115 <aiguljhyldyzbekkyzy@gmail.com>
Date: Mon, 18 Dec 2023 16:38:09 +0100
Subject: [PATCH] #737 UI fix

---
 .../drawer/WorkspaceInteractions.tsx          | 53 +++++++++++--------
 .../drawer/WorkspaceResourceBrowser.tsx       | 18 ++++---
 .../osb-portal/src/pages/WorkspacePage.tsx    |  6 +--
 3 files changed, 47 insertions(+), 30 deletions(-)

diff --git a/applications/osb-portal/src/components/workspace/drawer/WorkspaceInteractions.tsx b/applications/osb-portal/src/components/workspace/drawer/WorkspaceInteractions.tsx
index 4c1d4ee7..e32bcdfe 100644
--- a/applications/osb-portal/src/components/workspace/drawer/WorkspaceInteractions.tsx
+++ b/applications/osb-portal/src/components/workspace/drawer/WorkspaceInteractions.tsx
@@ -116,7 +116,7 @@ interface WorkspaceProps {
 }
 
 const SidebarBox = styled(Box)(({ theme }) => ({
-  borderRight: `0.085rem solid ${borderColor}`,
+  // borderRight: `0.085rem solid ${borderColor}`,
   width: "100%",
 }));
 
@@ -132,7 +132,7 @@ function TabPanel(props) {
       {...other}
     >
       {value === index && (
-        <Box sx={{ maxHeight: 480, overflowY: "scroll" }}>{children}</Box>
+        <Box sx={{ maxHeight: 480 }}>{children}</Box>
       )}
     </div>
   );
@@ -142,6 +142,9 @@ const SidebarIconButton = styled(IconButton)(({ theme }) => ({
   padding: 0,
   "& .MuiSvgIcon-root": {
     color: paragraph,
+    width: '1rem',
+    height: '1rem',
+    marginLeft: '0.25rem'
   },
   "&:hover": {
     background: "none",
@@ -198,31 +201,37 @@ export default (props: WorkspaceProps | any) => {
     <>
       {props.open ? (
         <SidebarBox>
-          <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
-            {!hideTabs && (
+          {!hideTabs && (
+            <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
               <Tabs
-                value={tabValue}
-                onChange={handleTabChange}
-                variant="fullWidth"
-              >
-                <Tab
-                  label="Workspace"
-                  sx={{ pl: "0.75rem", pr: "0.75rem", fontSize: "0.75rem" }}
-                />
-                <Tab
-                  label="My Assets"
-                  sx={{ pl: "0.75rem", pr: "0.75rem", fontSize: "0.75rem" }}
-                />
-              </Tabs>
-            )}
+                  value={tabValue}
+                  onChange={handleTabChange}
+                  variant="fullWidth"
+                >
+                  <Tab
+                    label="Workspace"
+                    sx={{ pl: "0.75rem", pr: "0.75rem", fontSize: "0.75rem" }}
+                  />
+                  <Tab
+                    label="My Assets"
+                    sx={{ pl: "0.75rem", pr: "0.75rem", fontSize: "0.75rem" }}
+                  />
+                </Tabs>
           </Box>
+          )}
           <TabPanel value={tabValue} index={0}>
             <ListItem
               component="div"
               className="workspace-tab-header"
               disablePadding
+              sx={{
+                marginTop: '0.75rem',
+                marginBottom: '0.75rem'
+              }}
             >
-              <ListItemButton>
+              <ListItemButton sx={{
+                padding: '0.25rem 0.75rem 0.25rem 1rem'
+              }}>
                 <ListItemText
                   primary="Workspace resources"
                   primaryTypographyProps={{
@@ -230,7 +239,7 @@ export default (props: WorkspaceProps | any) => {
                     variant: "body2",
                   }}
                 />
-                <Stack direction="row" spacing={1}>
+                <Stack direction="row">
                   <SidebarIconButton>
                     <Tooltip
                       sx={{ marginLeft: "0.3em" }}
@@ -270,7 +279,9 @@ export default (props: WorkspaceProps | any) => {
                     </>
                   ) : (
                     <Tooltip title="You do not have permissions to modify this workspace. Either clone it or create a new one if you need edit access.">
-                      <LockOutlinedIcon sx={{ color: paragraph }} />
+                      <SidebarIconButton>
+                        <LockOutlinedIcon sx={{ color: paragraph }} />
+                      </SidebarIconButton>
                     </Tooltip>
                   )}
                 </Stack>
diff --git a/applications/osb-portal/src/components/workspace/drawer/WorkspaceResourceBrowser.tsx b/applications/osb-portal/src/components/workspace/drawer/WorkspaceResourceBrowser.tsx
index d703d6b8..20e84717 100644
--- a/applications/osb-portal/src/components/workspace/drawer/WorkspaceResourceBrowser.tsx
+++ b/applications/osb-portal/src/components/workspace/drawer/WorkspaceResourceBrowser.tsx
@@ -38,6 +38,7 @@ import {
   bgInputs,
 } from "../../../theme";
 import { ResourceType } from "../../../apiclient/workspaces";
+import { Typography } from "@mui/material";
 
 
 
@@ -45,6 +46,8 @@ const SidebarIconButton = styled(IconButton)(({ theme }) => ({
   padding: 0,
   "& .MuiSvgIcon-root": {
     color: paragraph,
+    width: '1rem', 
+    height: '1rem'
   },
   "&:hover": {
     background: "none",
@@ -57,9 +60,7 @@ const ResourceItem = styled(ListItem)(({ theme }) => ({
     color: lightWhite,
   },
   "& .MuiListItemButton-root": {
-    paddingLeft: "2.571rem",
-    paddingTop: 0,
-    paddingBottom: 0,
+    padding: '0.25rem 1rem 0.25rem 2.25rem',
     "&:hover": {
       background: workspaceItemBg,
     },
@@ -85,6 +86,10 @@ const ResourceItem = styled(ListItem)(({ theme }) => ({
   "& .active .MuiTypography-root": {
     color: orangeText,
   },
+  "& .MuiListItemText-root": {
+    margin: 0,
+    maxWidth: '10rem'
+  }
 }));
 
 const OSBResourceItem = (props: {
@@ -218,7 +223,7 @@ const WorkspaceResourceBrowser = (props: WorkspaceProps) => {
 
     return (
       <>
-        <ListItemButton onClick={() => setOpen(!open)}>
+        <ListItemButton sx={{ pt: '4px', pb: '4px' }} onClick={() => setOpen(!open)}>
           <SidebarIconButton>
             {open ? (
               <ExpandLess fontSize="small" />
@@ -234,8 +239,9 @@ const WorkspaceResourceBrowser = (props: WorkspaceProps) => {
               pl: "0.286rem",
             }}
           />
+          <Typography>{resources.length}</Typography>
         </ListItemButton>
-        <Box className="scrollbar">
+        <Box className="scrollbar" sx={{ paddingRight: '0 !important' }}>
           {open &&
             resources.map((resource) => (
               <OSBResourceItem
@@ -256,7 +262,7 @@ const WorkspaceResourceBrowser = (props: WorkspaceProps) => {
   return (
     <Box className="verticalFill">
       <Box width="100%" className="verticalFill">
-        <List className="verticalFill">
+        <List className="verticalFill" sx={{ pt: 0, pb: 0 }}>
           {experimentalResources.length > 0 && (
             <ResourceTreeGroup
               resources={experimentalResources}
diff --git a/applications/osb-portal/src/pages/WorkspacePage.tsx b/applications/osb-portal/src/pages/WorkspacePage.tsx
index 26929854..541b3c04 100644
--- a/applications/osb-portal/src/pages/WorkspacePage.tsx
+++ b/applications/osb-portal/src/pages/WorkspacePage.tsx
@@ -230,7 +230,7 @@ export const WorkspacePage = (props: any) => {
                   item
                   xs={12}
                   sm={3}
-                  lg={2}
+                  lg={2.5}
                   sx={{
                     borderRight: `1px solid ${bgLightest}`,
                   }}
@@ -251,7 +251,7 @@ export const WorkspacePage = (props: any) => {
                   justifyContent={workspace?.thumbnail ? "center" : "start"}
                   xs={12}
                   sm={6}
-                  lg={8}
+                  lg={6.5}
                   id="workspace-detail-content"
                   className="verticalFit"
                 >
@@ -298,7 +298,7 @@ export const WorkspacePage = (props: any) => {
                     </Stack>
                   </Box>
                 </Grid>
-                <Grid item xs={12} sm={3} lg={2}>
+                <Grid item xs={12} sm={3} lg={2.5}>
                   <WorkspaceDetailsInfo workspace={workspace} />
                 </Grid>
               </Grid>