From 0a8546f6f77c3b72ccaae4555885d30603476863 Mon Sep 17 00:00:00 2001
From: mbalsdon <m.mathewbalsdon@gmail.com>
Date: Thu, 24 Mar 2022 18:30:26 -0700
Subject: [PATCH 1/2] partially fix bug where gear icon overlapped w/ names
 (still happens on very small viewports since flexShrink only adds a linebreak
 where there are spaces in text)

---
 src/components/sidebar/Sidebar.tsx     | 2 +-
 src/components/sidebar/SidebarUser.tsx | 8 +++++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index ea49f48..ffaac1c 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/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 = "12.5%";
 
 const Sidebar: React.FC = () => {
   const [group, setGroup] = useState<string>("Favorites");
diff --git a/src/components/sidebar/SidebarUser.tsx b/src/components/sidebar/SidebarUser.tsx
index e917235..adc4fa7 100644
--- a/src/components/sidebar/SidebarUser.tsx
+++ b/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,7 +28,9 @@ const SidebarUser: React.FC<Props> = ({ user, status }: Props) => {
             : MeetingStatus.NOT_IN_MEETING}
         </Typography>
       </Box>
-      <SettingsButton user={user} status={status} />
+      <Box sx={{ width: "20%" }}>
+        <SettingsButton user={user} status={status} />
+      </Box>
     </Box>
   );
 };

From e810900c7e429a0aeb04edd0ad136834e922f2d8 Mon Sep 17 00:00:00 2001
From: Taehee Choi <cth5545cth5545@gmail.com>
Date: Thu, 24 Mar 2022 22:29:00 -0700
Subject: [PATCH 2/2] sidebar position fixed

---
 src/components/sidebar/Sidebar.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index ffaac1c..a451e67 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/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 = "12.5%";
+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"