fix: improve MetaDetail layout (#2558)

regen-network · Nov 26, 2024 · 67da47f · 67da47f
1 parent efa3d8f
commit 67da47f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/web-marketplace/src/components/molecules/MetaDetail/MetaDetail.BaseValue.tsx b/web-marketplace/src/components/molecules/MetaDetail/MetaDetail.BaseValue.tsx
@@ -54,7 +54,7 @@ const MetaDetailBaseValue: React.FC<Props> = ({
   return (
     <>
       {formattedValue && (
-        <Body size={bodySize} sx={sxToArray(sx)} className="break-all">
+        <Body size={bodySize} sx={sxToArray(sx)} className="break-words">
           {formattedValue}
         </Body>
       )}
@@ -63,7 +63,7 @@ const MetaDetailBaseValue: React.FC<Props> = ({
           size={bodySize}
           styleLinks={false}
           sx={sxToArray(sx)}
-          className="break-all"
+          className="break-words"
         >
           <LinkWithArrow
             href={value['schema:url']}

diff --git a/web-marketplace/src/components/molecules/MetaDetail/MetaDetail.tsx b/web-marketplace/src/components/molecules/MetaDetail/MetaDetail.tsx
@@ -42,15 +42,19 @@ const MetaDetail: React.FC<Props> = ({
         {customContent ? (
           <>{customContent}</>
         ) : isArray ? (
-          value.map((v, i) => (
-            <MetaDetailBaseValue
-              key={i}
-              value={v}
-              rdfType={rdfType}
-              bodySize={bodySize}
-              sx={{ pb: value.length > 1 ? 2 : 0 }}
-            />
-          ))
+          value.map((v, i) => {
+            const isLast = i === value.length - 1;
+
+            return (
+              <MetaDetailBaseValue
+                key={i}
+                value={v}
+                rdfType={rdfType}
+                bodySize={bodySize}
+                sx={{ pb: value.length > 1 && !isLast ? 3 : 0 }}
+              />
+            );
+          })
         ) : (
           <MetaDetailBaseValue
             value={value}

diff --git a/...nents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.ComplianceInfo.tsx b/...nents/templates/ProjectDetails/TerrasosCreditsInfo/TerrasosCreditsInfo.ComplianceInfo.tsx
@@ -72,8 +72,6 @@ const ComplianceInfo = ({
             bodySize="lg"
           />
           <MetaDetail label={_(msg`biome`)} value={biomeType} bodySize="lg" />
-        </Grid>
-        <Grid container spacing={8}>
           <MetaDetail label={_(msg`region`)} value={region} bodySize="lg" />
           <MetaDetail
             label={_(msg`department`)}