Inline

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

@@ -21,10 +21,7 @@ import {
 } from "@/new/photos/services/search/types";
 import { labelForSuggestionType } from "@/new/photos/services/search/ui";
 import type { LocationTag } from "@/new/photos/services/user-entity";
-import {
-    FreeFlowText,
-    SpaceBetweenFlex,
-} from "@ente/shared/components/Container";
+import { SpaceBetweenFlex } from "@ente/shared/components/Container";
 import CalendarIcon from "@mui/icons-material/CalendarMonth";
 import CloseIcon from "@mui/icons-material/Close";
 import FolderIcon from "@mui/icons-material/Folder";
@@ -559,11 +556,12 @@ const LabelWithInfo = ({ data }: { data: SearchOption }) => {
                 </Typography>
                 <SpaceBetweenFlex>
                     <Box mr={1}>
-                        <FreeFlowText>
-                            <Typography fontWeight={"bold"}>
-                                {data.label}
-                            </Typography>
-                        </FreeFlowText>
+                        <Typography
+                            sx={{ fontWeight: "bold", wordBreak: "break-word" }}
+                        >
+                            {data.label}
+                        </Typography>
+
                         <Typography color="text.muted">
                             {t("photos_count", { count: data.fileCount })}
                         </Typography>

web/packages/shared/components/CodeBlock/index.tsx

@@ -1,6 +1,5 @@
-import { FreeFlowText } from "@ente/shared/components/Container";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
-import type { BoxProps } from "@mui/material";
+import { type BoxProps, styled } from "@mui/material";
 import React from "react";
 import CopyButton from "./CopyButton";
 import { CodeWrapper, CopyButtonWrapper, Wrapper } from "./styledComponents";
@@ -35,3 +34,9 @@ export default function CodeBlock({
         </Wrapper>
     );
 }
+
+const FreeFlowText = styled("div")`
+    word-break: break-word;
+    min-width: 30%;
+    text-align: left;
+`;

web/packages/shared/components/Container.tsx

@@ -31,12 +31,6 @@ export const FlexWrapper = styled(Box)`
     align-items: center;
 `;
 
-export const FreeFlowText = styled("div")`
-    word-break: break-word;
-    min-width: 30%;
-    text-align: left;
-`;
-
 export const SpaceBetweenFlex = styled(FlexWrapper)`
     justify-content: space-between;
 `;