Merge pull request #54 from kleros/fix/text-overflow-in-item-card

fix(web): text-overflow-in-item-card
kleros · Aug 28, 2024 · aac4077 · aac4077
2 parents 058af70 + 1356cad
commit aac4077
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/web/src/components/ItemCard/ItemField/TextField.tsx b/web/src/components/ItemCard/ItemField/TextField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import WithHelpTooltip from "components/WithHelpTooltip";
+import TruncatedText from "components/TruncatedText";
 
 const Container = styled.p`
   margin: 0px;
@@ -13,7 +14,13 @@ export interface ITextField {
 }
 const TextField: React.FC<ITextField> = ({ value, detailed, label }) => {
   return (
-    <Container>{detailed ? <WithHelpTooltip tooltipMsg={label ?? ""}>{value}</WithHelpTooltip> : value}</Container>
+    <Container>
+      {detailed ? (
+        <WithHelpTooltip tooltipMsg={label ?? ""}>{value}</WithHelpTooltip>
+      ) : (
+        <TruncatedText text={value} maxLength={100} />
+      )}
+    </Container>
   );
 };
 

diff --git a/web/src/components/ItemCard/index.tsx b/web/src/components/ItemCard/index.tsx
@@ -63,7 +63,7 @@ const FieldsContainer = styled.div`
   flex-direction: column;
   justify-content: space-between;
   align-items: start;
-  width: max-content;
+  width: fit-content;
   gap: 16px;
   grid-column: span 2;
   ${landscapeStyle(