Merge pull request #82 from fuzue/77-fruits-and-vegetable-names-isnt-…

…fitting-on-the-box-in-some-resolutions fix(item): ellipsis text
fuzue · Aug 30, 2023 · 28b751e · 28b751e
2 parents 4d8b62e + ea03e68
commit 28b751e
Showing 1 changed file with 1 addition and 1 deletion.
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
@@ -35,7 +35,7 @@ function Item(props: FoodObject) {
               top={0}
               fontSize="max(1rem, min(4.5vw, 3rem))"
               fontWeight={400}
-              sx={{ p: "0.25em", transform: "translateY(-20%)" }}
+              sx={{ p: "0.25em", transform: "translateY(-20%)", overflow: "hidden", textOverflow: "ellipsis" }}
             >
               {t(props.description[0].name)}
             </Typography>