Extract

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

@@ -1,4 +1,7 @@
+import { EllipsizedTypography } from "@/base/components/Typography";
+import { IconButtonWithBG } from "@ente/shared/components/Container";
 import CloseIcon from "@mui/icons-material/Close";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
 import {
     Box,
     Button,
@@ -6,15 +9,10 @@ import {
     Stack,
     SxProps,
     Theme,
-    Typography,
-    styled,
     type ButtonProps,
 } from "@mui/material";
 import { NotificationAttributes } from "types/Notification";
 
-import { IconButtonWithBG } from "@ente/shared/components/Container";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
-
 interface Iprops {
     open: boolean;
     onClose: () => void;
@@ -127,9 +125,3 @@ export default function Notification({
         </Snackbar>
     );
 }
-
-const EllipsizedTypography = styled(Typography)`
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;

web/packages/base/components/Typography.tsx

@@ -0,0 +1,21 @@
+import { styled, Typography } from "@mui/material";
+
+/**
+ * A variant of {@link Typography} that inserts ellipsis instead of wrapping the
+ * text over multiple lines, or letting it overflow.
+ *
+ * Refs:
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text
+ * - https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
+ */
+export const EllipsizedTypography = styled(Typography)`
+    /* Initial value of overflow is visible. Set overflow (the handling of
+      content that is too small for the container in the inline direction) to
+      hidden instead. */
+    overflow: hidden;
+    /* Specify handling of text when it overflows, asking the browser to insert
+       ellipsis instead of clipping. */
+    text-overflow: ellipsis;
+    /* Don't automatically wrap the text by inserting line breaks. */
+    white-space: nowrap;
+`;