fix: adjust slide-in panel width on different screen size; refs #51

Author: elainefan331

src/components/NavBar/NavItems.tsx

@@ -27,6 +27,7 @@ const NavItems: React.FC = () => {
             <Box
               component="img"
               src={`${process.env.PUBLIC_URL}/img/section1_logo_colored.png`}
+              // src={`${process.env.PUBLIC_URL}/img/section1_logo_contained.png`}
               alt="logo"
               onClick={() => navigate("/")}
               height="auto"

src/components/NodeInfoPanel.tsx

@@ -79,7 +79,7 @@ const NodeInfoPanel: React.FC<NodeInfoPanelProps> = ({
       sx={{
         zIndex: (theme) => theme.zIndex.modal + 10,
         "& .MuiDrawer-paper": {
-          width: "25%",
+          width: { xs: "100%", sm: "40%", md: "30%" },
           padding: "1rem",
           boxShadow: `0px 0px 15px ${Colors.lightGray}`,
           backgroundColor: "rgba(97, 109, 243, 0.1)",