Schedule Name Alt Text Expansion (#1077)

icssc · Dec 16, 2024 · e454cee · e454cee
1 parent 67d9d36
commit e454cee
Showing 1 changed file with 40 additions and 34 deletions.
diff --git a/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx b/apps/antalmanac/src/components/Calendar/toolbar/ScheduleSelect/ScheduleSelect.tsx
@@ -1,5 +1,5 @@
 import { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material';
-import { Box, Button, Popover, Typography, useTheme } from '@mui/material';
+import { Box, Button, Popover, Typography, useTheme, Tooltip } from '@mui/material';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { changeCurrentSchedule } from '$actions/AppStoreActions';
@@ -83,18 +83,20 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
 
     return (
         <Box>
-            <Button
-                size="small"
-                color="inherit"
-                variant="outlined"
-                onClick={handleClick}
-                sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
-            >
-                <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
-                    {currentScheduleName}
-                </Typography>
-                <ArrowDropDownIcon />
-            </Button>
+            <Tooltip title={currentScheduleName} enterDelay={200} disableInteractive>
+                <Button
+                    size="small"
+                    color="inherit"
+                    variant="outlined"
+                    onClick={handleClick}
+                    sx={{ minWidth, maxWidth, justifyContent: 'space-between' }}
+                >
+                    <Typography whiteSpace="nowrap" textOverflow="ellipsis" overflow="hidden" textTransform="none">
+                        {currentScheduleName}
+                    </Typography>
+                    <ArrowDropDownIcon />
+                </Button>
+            </Tooltip>
 
             <Popover
                 open={open}
@@ -106,28 +108,32 @@ export function SelectSchedulePopover(props: { scheduleNames: string[] }) {
                     {props.scheduleNames.map((name, index) => (
                         <Box key={index} display="flex" alignItems="center" gap={1}>
                             <Box flexGrow={1}>
-                                <Button
-                                    color="inherit"
-                                    sx={{
-                                        minWidth,
-                                        maxWidth,
-                                        width: '100%',
-                                        display: 'flex',
-                                        justifyContent: 'flex-start',
-                                        background:
-                                            index === currentScheduleIndex ? theme.palette.action.selected : undefined,
-                                    }}
-                                    onClick={createScheduleSelector(index)}
-                                >
-                                    <Typography
-                                        overflow="hidden"
-                                        whiteSpace="nowrap"
-                                        textTransform="none"
-                                        textOverflow="ellipsis"
+                                <Tooltip title={name} enterDelay={200} disableInteractive>
+                                    <Button
+                                        color="inherit"
+                                        sx={{
+                                            minWidth,
+                                            maxWidth,
+                                            width: '100%',
+                                            display: 'flex',
+                                            justifyContent: 'flex-start',
+                                            background:
+                                                index === currentScheduleIndex
+                                                    ? theme.palette.action.selected
+                                                    : undefined,
+                                        }}
+                                        onClick={createScheduleSelector(index)}
                                     >
-                                        {name}
-                                    </Typography>
-                                </Button>
+                                        <Typography
+                                            overflow="hidden"
+                                            whiteSpace="nowrap"
+                                            textTransform="none"
+                                            textOverflow="ellipsis"
+                                        >
+                                            {name}
+                                        </Typography>
+                                    </Button>
+                                </Tooltip>
                             </Box>
                             <Box display="flex" alignItems="center" gap={0.5}>
                                 <CopyScheduleButton index={index} disabled={skeletonMode} />