diff --git a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx index 82df813fcc..c75a1156d4 100644 --- a/src/components/AppLayout/Sidebar/SafeHeader/index.tsx +++ b/src/components/AppLayout/Sidebar/SafeHeader/index.tsx @@ -102,9 +102,7 @@ const SafeHeader = ({ -
- -
+ diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx index f59c3b0e37..d50e3ca770 100644 --- a/src/components/AppLayout/Sidebar/index.tsx +++ b/src/components/AppLayout/Sidebar/index.tsx @@ -10,14 +10,14 @@ const StyledDivider = styled(Divider)` ` const HelpContainer = styled.div` - height: 58px; + margin-top: auto; ` const HelpCenterLink = styled.a` height: 30px; width: 166px; - padding: 10px 0 0 16px; - margin: 10px 0px; + padding: 6px 0 0 16px; + margin: 14px 0px; text-decoration: none; display: block; diff --git a/src/components/AppLayout/index.tsx b/src/components/AppLayout/index.tsx index 20bd8c8907..581e0b2df6 100644 --- a/src/components/AppLayout/index.tsx +++ b/src/components/AppLayout/index.tsx @@ -28,18 +28,15 @@ const GridTopbarWrapper = styled.nav` const GridSidebarWrapper = styled.aside` width: 200px; - padding: 8px; + padding: 62px 8px 0 8px; height: 100%; background-color: ${({ theme }) => theme.colors.white}; border-right: 2px solid ${({ theme }) => theme.colors.separator}; display: flex; flex-direction: column; box-sizing: border-box; + position: fixed; grid-area: sidebar; - - div:last-of-type { - margin-top: auto; - } ` const GridBodyWrapper = styled.section` diff --git a/src/components/List/index.tsx b/src/components/List/index.tsx index adec3dacda..f2b7f0cd2b 100644 --- a/src/components/List/index.tsx +++ b/src/components/List/index.tsx @@ -70,6 +70,21 @@ const useStyles = makeStyles((theme: Theme) => width: '100%', maxWidth: 200, backgroundColor: theme.palette.background.paper, + overflowX: 'auto', + margin: '8px 0 -4px 0', + '&::-webkit-scrollbar': { + width: '0.5em', + }, + '&::-webkit-scrollbar-track': { + boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)', + webkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)', + borderRadius: '20px', + }, + '&::-webkit-scrollbar-thumb': { + backgroundColor: 'darkgrey', + outline: '1px solid #dadada', + borderRadius: '20px', + }, }, nested: { paddingLeft: theme.spacing(3),