From 1356cadb886ca47c6bf6ffc8134252813360b4f0 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Wed, 28 Aug 2024 11:31:01 +0530
Subject: [PATCH] fix(web): text-overflow-in-item-card

---
 web/src/components/ItemCard/ItemField/TextField.tsx | 9 ++++++++-
 web/src/components/ItemCard/index.tsx               | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/web/src/components/ItemCard/ItemField/TextField.tsx b/web/src/components/ItemCard/ItemField/TextField.tsx
index a10432d..56f00ea 100644
--- 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
index 87635ce..9a24984 100644
--- 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(