fix(web): text-overflow-in-item-card

Author: tractorss

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

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(