Merge pull request #3981 from Northeastern-Electric-Racing/3961-overlaping-icon-fix

#3961- adding flexible spacing

Author: chpy04

src/frontend/src/pages/CalendarPage/EventClickPopup.tsx

@@ -158,55 +158,57 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
           {pendingReason}
         </Alert>
       )}
-      <Box sx={{ position: 'relative', mb: 2 }}>
-        {!disable && canEditOrDelete && (
-          <Box sx={{ position: 'absolute', top: 0, right: 0, display: 'flex', gap: 0.5 }}>
-            <IconButton
-              size="small"
-              onClick={(e) => {
-                stopClick(e);
-                onEdit(event);
-              }}
-              sx={{
-                color: theme.palette.grey[500],
-                '&:hover': {
-                  color: theme.palette.common.white,
-                  bgcolor: 'transparent'
-                }
-              }}
-            >
-              <EditIcon fontSize="small" />
-            </IconButton>
-            <IconButton
-              size="small"
-              onClick={(e) => {
-                stopClick(e);
-                onDelete(event);
-              }}
+
+      <Box sx={{ mb: 2 }}>
+        <Stack direction="row" spacing={1} alignItems="flex-start">
+          {getTeamTypeIcon(event.teamType?.name ?? '', true)}
+
+          <Box sx={{ flex: 1, minWidth: 0 }}>
+            <Typography
+              variant="h6"
               sx={{
-                color: theme.palette.grey[500],
-                '&:hover': {
-                  color: '#ef5350',
-                  bgcolor: 'transparent'
-                }
+                fontWeight: 'bold',
+                color: calendarColor,
+                whiteSpace: 'normal',
+                overflowWrap: 'anywhere',
+                lineHeight: 1.2
               }}
             >
-              <DeleteIcon fontSize="small" />
-            </IconButton>
+              {name}
+            </Typography>
           </Box>
-        )}
-        <Stack direction="row" spacing={1} alignItems="center" sx={{ pr: 4 }}>
-          {getTeamTypeIcon(event.teamType?.name ?? '', true)}
-          <Typography
-            variant="h6"
-            noWrap
-            sx={{
-              fontWeight: 'bold',
-              color: calendarColor
-            }}
-          >
-            {name}
-          </Typography>
+
+          {!disable && canEditOrDelete && (
+            <Stack direction="row" spacing={0.5} sx={{ flexShrink: 0 }}>
+              <IconButton
+                size="small"
+                onClick={(e) => {
+                  stopClick(e);
+                  onEdit(event);
+                }}
+                sx={{
+                  color: theme.palette.grey[500],
+                  '&:hover': { color: theme.palette.common.white, bgcolor: 'transparent' }
+                }}
+              >
+                <EditIcon fontSize="small" />
+              </IconButton>
+
+              <IconButton
+                size="small"
+                onClick={(e) => {
+                  stopClick(e);
+                  onDelete(event);
+                }}
+                sx={{
+                  color: theme.palette.grey[500],
+                  '&:hover': { color: '#ef5350', bgcolor: 'transparent' }
+                }}
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Stack>
+          )}
         </Stack>
 
         <Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 0.5, flexWrap: 'wrap' }}>
@@ -426,6 +428,7 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
             </Typography>
           </Stack>
         )}
+
         {addApprovalButtons && canApprove && (
           <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
             <NERSuccessButton
@@ -443,6 +446,7 @@ export const EventClickContent: React.FC<EventClickContentProps> = ({
             >
               Approve
             </NERSuccessButton>
+
             <NERFailButton
               sx={{ mx: 1 }}
               onClick={async () => {

src/frontend/src/pages/CalendarPage/EventPartialInfoView.tsx

@@ -48,13 +48,28 @@ const EventPartialInfoView: React.FC<EventInfoProps> = ({ event, eventTypes, cal
       }}
     >
       <Stack direction="row" spacing={5}>
-        <Stack direction="row" sx={{ minWidth: 200 }}>
+        <Stack direction="row" sx={{ minWidth: 0, flex: 1 }}>
           {getTeamTypeIcon(event.teamType?.name ?? '', false)}
-          <Typography marginX={0.5} marginY={0.5} lineHeight={'120%'} fontSize={12} fontWeight="bold" align="left">
+          <Typography
+            marginX={0.5}
+            marginY={0.5}
+            lineHeight={'120%'}
+            fontSize={12}
+            fontWeight="bold"
+            align="left"
+            sx={{
+              flex: 1,
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            }}
+          >
             {name}
           </Typography>
         </Stack>
-        <Stack direction="row" sx={{ minWidth: 150 }}>
+
+        <Stack direction="row" sx={{ minWidth: 150, flexShrink: 0 }}>
           <AccessTimeIcon />
           {event.allDay ? (
             <Typography marginX={0.5} marginY={0.5} lineHeight={'120%'} fontSize={12} fontWeight="bold" align="left">
@@ -67,14 +82,28 @@ const EventPartialInfoView: React.FC<EventInfoProps> = ({ event, eventTypes, cal
           )}
         </Stack>
       </Stack>
+
       <Stack direction="row" spacing={5}>
-        <Stack direction="row" sx={{ minWidth: 200 }}>
+        <Stack direction="row" sx={{ minWidth: 0, flex: 1 }}>
           <LocationOnIcon />
-          <Typography marginX={0.5} marginY={0.5} lineHeight={'120%'} fontSize={12} fontWeight="bold" align="left">
+          <Typography
+            marginX={0.5}
+            marginY={0.5}
+            lineHeight={'120%'}
+            fontSize={12}
+            fontWeight="bold"
+            align="left"
+            sx={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap'
+            }}
+          >
             {event.location ?? 'N/A'}
           </Typography>
         </Stack>
-        <Stack direction="row" sx={{ minWidth: 150 }}>
+
+        <Stack direction="row" sx={{ minWidth: 150, flexShrink: 0 }}>
           <GroupIcon />
           <Typography marginX={0.5} marginY={0.5} lineHeight={'120%'} fontSize={12} fontWeight="bold" align="left">
             {event.requiredMembers[0]