2 line

web/packages/base/components/Typography.tsx

@@ -14,8 +14,24 @@ export const EllipsizedTypography = styled(Typography)`
        hidden instead. */
     overflow: hidden;
     /* Specify handling of text when it overflows, asking the browser to insert
-       ellipsis instead of clipping. */
+       ellipsis instead of clipping.
+
+       Note that both overflow and text-overflow are required.
+      */
     text-overflow: ellipsis;
     /* Don't automatically wrap the text by inserting line breaks. */
     white-space: nowrap;
 `;
+
+/**
+ * A variant of {@link EllipsizedTypography} that takes up to 2 lines.
+ */
+export const Ellipsized2LineTypography = 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;
+    word-break: break-word;
+`;

web/packages/new/photos/components/gallery/BarImpl.tsx

@@ -1,5 +1,6 @@
 import { FilledIconButton } from "@/base/components/mui";
 import { Overlay } from "@/base/components/mui/Container";
+import { Ellipsized2LineTypography } from "@/base/components/Typography";
 import { useIsSmallWidth } from "@/base/components/utils/hooks";
 import { CollectionsSortOptions } from "@/new/photos/components/CollectionsSortOptions";
 import {
@@ -508,21 +509,13 @@ const CollectionBarCard: React.FC<CollectionBarCardProps> = ({
 const CardText: React.FC<React.PropsWithChildren> = ({ children }) => (
     <TileTextOverlay>
         <Box height={"2.1em"}>
-            <Ellipsized variant="small">{children}</Ellipsized>
+            <Ellipsized2LineTypography variant="small">
+                {children}
+            </Ellipsized2LineTypography>
         </Box>
     </TileTextOverlay>
 );
 
-const Ellipsized = 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;
-    word-break: break-word;
-`;
-
 interface CollectionBarCardIconProps {
     type: CollectionSummaryType;
 }

web/packages/new/photos/pages/duplicates.tsx

@@ -7,6 +7,7 @@ import {
     OverflowMenu,
     OverflowMenuOption,
 } from "@/base/components/OverflowMenu";
+import { Ellipsized2LineTypography } from "@/base/components/Typography";
 import { pt } from "@/base/i18n";
 import log from "@/base/log";
 import { formattedByteSize } from "@/new/photos/utils/units";
@@ -511,7 +512,9 @@ const ListItem: React.FC<ListChildComponentProps<DuplicatesListItemData>> =
                             coverFile={item.file}
                         >
                             <DuplicateTileTextOverlay>
-                                <Typography color="text.muted">{item.collectionName}</Typography>
+                                <Ellipsized2LineTypography color="text.muted">
+                                    {item.collectionName}
+                                </Ellipsized2LineTypography>
                             </DuplicateTileTextOverlay>
                         </ItemCard>
                     ))}