Inline

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/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>
-    );
-}