Merge pull request #38 from CPSC319-Winter-term-2/mbalsdon-sidebar-overlap-fix

(mostly) fix gear icon overlap bug

src/components/sidebar/Sidebar.tsx

@@ -16,7 +16,7 @@ import SidebarUser from "./SidebarUser";
 
 // TODO: toolbar on top of sidebar since it goes under the navbar
 
-const drawerWidth = 200;
+const drawerWidth = "200px";
 
 const Sidebar: React.FC = () => {
   const [group, setGroup] = useState<string>("Favorites");
@@ -33,15 +33,16 @@ const Sidebar: React.FC = () => {
     selectUserStatuses(state, groupMembersUuids)
   );
 
-  console.log(group);
-
   return (
     <Drawer
       sx={{
         width: drawerWidth,
         "& .MuiDrawer-paper": {
           width: drawerWidth,
+          position: "static",
+          height: "100%",
         },
+        height: "100%",
       }}
       variant="permanent"
       anchor="right"

src/components/sidebar/SidebarUser.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
   return (
-    <Box sx={{ display: "flex", flexDirection: "row", p: 1 }}>
+    <Box sx={{ width: "100%", display: "flex", flexDirection: "row", p: 1 }}>
       <Box
         bgcolor={getStatusColor(
           status.inMeeting
@@ -20,7 +20,7 @@ const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
         )}
         sx={{ p: 1 }}
       />
-      <Box sx={{ display: "flex", flexDirection: "column", ml: 1 }}>
+      <Box sx={{ width: "80%", display: "flex", flexDirection: "column", ml: 1 }}>
         <Typography variant="h6">{user.name}</Typography>
         <Typography variant="caption">
           {status.inMeeting
@@ -28,8 +28,10 @@ const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
             : MeetingStatus.NOT_IN_MEETING}
         </Typography>
       </Box>
+      <Box sx={{ width: "20%" }}>
         <SettingsButton user={user} status={status} />
       </Box>
+    </Box>
   );
 };