[web] Fix download notification text overflow (#2316)

Fix overflowing file name on download success notification in case the
file name is very long and without any spaces.

web/apps/photos/src/components/Collections/CollectionListBar/CollectionCard.tsx

@@ -3,8 +3,8 @@ import Favorite from "@mui/icons-material/FavoriteRounded";
 import LinkIcon from "@mui/icons-material/Link";
 import PeopleIcon from "@mui/icons-material/People";
 import PushPin from "@mui/icons-material/PushPin";
-import { Box } from "@mui/material";
-import TruncateText from "components/TruncateText";
+import { Box, Typography, styled } from "@mui/material";
+import Tooltip from "@mui/material/Tooltip";
 import { CollectionSummaryType } from "constants/collection";
 import { CollectionSummary } from "types/collection";
 import CollectionCard from "../CollectionCard";
@@ -78,3 +78,24 @@ function CollectionCardIcon({ collectionType }) {
 }
 
 export default CollectionListBarCard;
+
+const TruncateText = ({ text }) => {
+    return (
+        <Tooltip title={text}>
+            <Box height={"2.1em"} overflow="hidden">
+                <Ellipse variant="small" sx={{ wordBreak: "break-word" }}>
+                    {text}
+                </Ellipse>
+            </Box>
+        </Tooltip>
+    );
+};
+
+const Ellipse = styled(Typography)`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2; //number of lines to show
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
+`;

web/apps/photos/src/components/Notification.tsx

@@ -7,6 +7,7 @@ import {
     SxProps,
     Theme,
     Typography,
+    styled,
     type ButtonProps,
 } from "@mui/material";
 import { NotificationAttributes } from "types/Notification";
@@ -72,6 +73,7 @@ export default function Notification({
                     spacing={2}
                     direction="row"
                     alignItems={"center"}
+                    width={"100%"}
                 >
                     <Box sx={{ svg: { fontSize: "36px" } }}>
                         {attributes.startIcon ?? <InfoIcon />}
@@ -82,26 +84,29 @@ export default function Notification({
                         spacing={0.5}
                         flex={1}
                         textAlign="left"
+                        // This is necessary to trigger the ellipsizing of the
+                        // text in children.
+                        overflow="hidden"
                     >
                         {attributes.subtext && (
-                            <Typography variant="small">
+                            <EllipsizedTypography variant="small">
                                 {attributes.subtext}
-                            </Typography>
+                            </EllipsizedTypography>
                         )}
                         {attributes.message && (
-                            <Typography fontWeight="bold">
+                            <EllipsizedTypography fontWeight="bold">
                                 {attributes.message}
-                            </Typography>
+                            </EllipsizedTypography>
                         )}
                         {attributes.title && (
-                            <Typography fontWeight="bold">
+                            <EllipsizedTypography fontWeight="bold">
                                 {attributes.title}
-                            </Typography>
+                            </EllipsizedTypography>
                         )}
                         {attributes.caption && (
-                            <Typography variant="small">
+                            <EllipsizedTypography variant="small">
                                 {attributes.caption}
-                            </Typography>
+                            </EllipsizedTypography>
                         )}
                     </Stack>
 
@@ -122,3 +127,9 @@ export default function Notification({
         </Snackbar>
     );
 }
+
+const EllipsizedTypography = styled(Typography)`
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+`;

web/apps/photos/src/components/TruncateText.tsx

@@ -1,23 +0,0 @@
-import { Box, styled, Typography } from "@mui/material";
-import Tooltip from "@mui/material/Tooltip";
-
-const Ellipse = styled(Typography)`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2; //number of lines to show
-    line-clamp: 2;
-    -webkit-box-orient: vertical;
-`;
-
-export default function TruncateText({ text }) {
-    return (
-        <Tooltip title={text}>
-            <Box height={"2.1em"} overflow="hidden">
-                <Ellipse variant="small" sx={{ wordBreak: "break-word" }}>
-                    {text}
-                </Ellipse>
-            </Box>
-        </Tooltip>
-    );
-}