added opacity and handling of too long course names and having three courses at same time

src/components/Dropdown.tsx

@@ -9,6 +9,7 @@ const DropdownContainer = styled.div`
   max-height: 396px;
   border-radius: 3px;
   overflow-y: auto;
+  opacity: 0.97;
   box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
   scroll-snap-type: y mandatory;
   scroll-behavior: smooth;
@@ -19,7 +20,7 @@ const DropdownContainer = styled.div`
   ::-webkit-scrollbar {
     background-color: #f2f4f7;
     width: 5px;
-    border-style:none;
+    border-style: none;
   }
   ::-webkit-scrollbar-thumb {
     border-radius: 10px;

src/components/SchedulerRow.tsx

@@ -65,8 +65,22 @@ const StyledTypography = styled(Typography)`
   background-color: white;
 `;
 
-const BoldParagraph = styled.p`
+const threeStyles = () => {
+  return `
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 70px;`;
+};
+
+
+type BoldParagraphProps = {
+  isThree?: boolean;
+};
+
+const BoldParagraph = styled.p<BoldParagraphProps>`
+  overflow: hidden;
   flex: 3;
+  ${({ isThree }) => isThree && threeStyles}
 `;
 
 const ClassWrap = styled.div`
@@ -97,27 +111,18 @@ interface SchedulerRowProps {
 }
 
 const getGroupsPerDay = (groups: Array<SchedulerEvent>) => {
-
+  const groupsPerDay: any = { 0: 0, 1: 0, 2: 0, 3: 0, 4: 0 };
-  const xd = groups.reduce((sum:any,group:SchedulerEvent)=>{
+  for (const group of groups) {
-    if (sum.hasOwnProperty(group.day))
+    groupsPerDay[group.day]++;
-    {
+  }
-      return sum[group.day]+=1  
+  return groupsPerDay;
-    }
+};
-    else{
-      return sum[group.day]=0}
-  },[])
-
-  console.log("123123123",xd);
-  return xd;
-}
 
 export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = React.useState<HTMLDivElement | null>(null);
   const [popoverId, setPopoverId] = useState<string | null>(null);
-
   const groupsPerDay = getGroupsPerDay(groups);
-
   //looks weird
   const handlePopoverOpen = (event: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
     setAnchorEl(event.currentTarget);
@@ -129,7 +134,6 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
     setPopoverId(null);
   };
 
-
   const open = Boolean(anchorEl);
 
   return (
@@ -159,13 +163,17 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }
                     onMouseLeave={handlePopoverClose}
                   >
                     <ClassWrap>
-                      <BoldParagraph>{groups[index].name}</BoldParagraph>
+                      <BoldParagraph isThree={groupsPerDay[group.day] >= 3}>{groups[index].name}</BoldParagraph>
-                      <TextWrapper>
+                      {groupsPerDay[group.day] < 3 ? (
-                        <div>
+                        <TextWrapper>
-                        {cellWidth > 200 ? `${groups[index].time[0]} - ${groups[index].time[1]}` : ''}
+                          <div>{`${groups[index].time[0]}-${groups[index].time[1]}`}</div>
-                        </div>
+                          <div>3/30</div>
-                        <div>3/30</div>
+                        </TextWrapper>
-                      </TextWrapper>
+                      ) : (
+                        <TextWrapper style={{ flexDirection: 'column' }}>
+                          <div style={{ alignSelf: 'flex-end' }}>3/30</div>
+                        </TextWrapper>
+                      )}
                     </ClassWrap>
                   </StyledSchedulerEvent>
                   <Popover