style: Break words in chart header

visualize-admin · Feb 1, 2024 · 1b32081 · 1b32081
1 parent 79ee22a
commit 1b32081
Showing 1 changed file with 10 additions and 2 deletions.
diff --git a/app/configurator/components/annotators.tsx b/app/configurator/components/annotators.tsx
@@ -51,7 +51,11 @@ export const Title = (props: Props) => {
       variant="h2"
       className={clsx(classes.text, className)}
       onClick={onClick}
-      sx={{ color: text ? text : getEmptyColor(lighterColor), ...sx }}
+      sx={{
+        color: text ? text : getEmptyColor(lighterColor),
+        wordBreak: "break-word",
+        ...sx,
+      }}
     >
       {text ? text : <Trans id="annotation.add.title">[ Title ]</Trans>}
     </Typography>
@@ -68,7 +72,11 @@ export const Description = (props: Props) => {
       variant="body1"
       className={clsx(classes.text, className)}
       onClick={onClick}
-      sx={{ color: text ? text : getEmptyColor(lighterColor), ...sx }}
+      sx={{
+        color: text ? text : getEmptyColor(lighterColor),
+        wordBreak: "break-word",
+        ...sx,
+      }}
     >
       {text ? (
         text