[web] Improve the handling of ellipsized labels (#2837)

The overflow: "hidden" on the two parent divs is still needed, for
reasons I don't fully understand, need to debug further at some point.

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/apps/photos/src/components/PhotoViewer/FileInfo/index.tsx

@@ -1,5 +1,6 @@
 import { EnteDrawer } from "@/base/components/EnteDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
+import { EllipsizedTypography } from "@/base/components/Typography";
 import { nameAndExtension } from "@/base/file";
 import log from "@/base/log";
 import type { ParsedMetadata } from "@/media/file-metadata";
@@ -609,16 +610,13 @@ const RawExif: React.FC<RawExifProps> = ({
                                 {namespace}
                             </Typography>
                         </Stack>
-                        <Typography
+                        <EllipsizedTypography
                             sx={{
                                 width: "100%",
-                                textOverflow: "ellipsis",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
                             }}
                         >
                             {description}
-                        </Typography>
+                        </EllipsizedTypography>
                     </ExifItem>
                 ))}
             </Stack>

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

@@ -1,3 +1,4 @@
+import { EllipsizedTypography } from "@/base/components/Typography";
 import { ensureElectron } from "@/base/electron";
 import { basename, dirname } from "@/base/file";
 import type { CollectionMapping, FolderWatch } from "@/base/types/ipc";
@@ -259,7 +260,6 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
             <HorizontalFlex
                 sx={{
                     overflow: "hidden",
-                    textOverflow: "ellipsis",
                 }}
             >
                 {watch.collectionMapping === "root" ? (
@@ -273,7 +273,7 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
                 )}
                 <EntryContainer>
                     <EntryHeading watch={watch} />
-                    <FolderPath variant="small">{watch.folderPath}</FolderPath>
+                    <FolderPath>{watch.folderPath}</FolderPath>
                 </EntryContainer>
             </HorizontalFlex>
             <EntryOptions {...{ confirmStopWatching }} />
@@ -283,7 +283,6 @@ const WatchEntry: React.FC<WatchEntryProps> = ({ watch, removeWatch }) => {
 
 const EntryContainer = styled(Box)({
     overflow: "hidden",
-    textOverflow: "ellipsis",
     marginLeft: "12px",
     marginRight: "6px",
     marginBottom: "12px",
@@ -306,11 +305,11 @@ const EntryHeading: React.FC<EntryHeadingProps> = ({ watch }) => {
     );
 };
 
-const FolderPath = styled(Typography)(({ theme }) => ({
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    color: theme.colors.text.muted,
-}));
+const FolderPath: React.FC<React.PropsWithChildren> = ({ children }) => (
+    <EllipsizedTypography variant="small" color="text.muted">
+        {children}
+    </EllipsizedTypography>
+);
 
 interface EntryOptionsProps {
     confirmStopWatching: () => void;

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;
+`;