From a724b5eb5c78568384ac7293682fc4ab9c1e5551 Mon Sep 17 00:00:00 2001
From: Summer Cook <summer@scientist.com>
Date: Wed, 31 Jan 2024 16:41:08 -0800
Subject: [PATCH 1/3] truncate descriptions

---
 src/compounds/Item/CardBody.jsx | 29 +++++++++++++++++++++++------
 src/compounds/Item/item.scss    |  4 ++++
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/compounds/Item/CardBody.jsx b/src/compounds/Item/CardBody.jsx
index 2c44d048..fcce70ed 100644
--- a/src/compounds/Item/CardBody.jsx
+++ b/src/compounds/Item/CardBody.jsx
@@ -1,13 +1,22 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
-import { Card } from 'react-bootstrap'
+import { Button, Card, Collapse } from 'react-bootstrap'
 import NextLink from '../../components/NextLink/NextLink'
 import LinkedButton from '../LinkedButton/LinkedButton'
 
 const CardBody = ({ buttonLink, buttonProps, item,
   orientation, titleLink, withButtonLink, withTitleLink }) => {
-  const { id, description, name } = item
+  const { id, description = '', name } = item
+  const [open, setOpen] = useState(false)
 
+  const truncateDescription = (desc, maxLength, isOpen) => {
+    if (desc.length <= maxLength || isOpen) return { truncated: desc, cutOffIndex: desc.length };
+    const lastSpaceIndex = desc.substring(0, maxLength).lastIndexOf(' ');
+    const ellipsis = isOpen ? '' : '...';
+    return { truncated: desc.slice(0, lastSpaceIndex) + ellipsis, cutOffIndex: lastSpaceIndex };
+  }
+
+  const { truncated, cutOffIndex } = truncateDescription(description, 300, open)
   return (
     <Card.Body className={withButtonLink && 'd-flex flex-column'}>
       <div className={orientation === 'horizontal' ? 'd-block d-md-flex align-items-center justify-content-between' : ''}>
@@ -25,9 +34,17 @@ const CardBody = ({ buttonLink, buttonProps, item,
             )}
           </Card.Title>
           {description && (
-            <Card.Text className='fw-light'>
-              {description}
-            </Card.Text>
+            <>
+              <div className='fw-light mh-300 overflow-auto mt-3'>
+                {truncated}
+                <Collapse in={open}>
+                  <div className='fw-light'>{description.slice(cutOffIndex).trimStart()}</div>
+                </Collapse>
+              </div>
+              <Button variant="link" onClick={() => setOpen(!open)} className="p-0 mt-3">
+                {open ? ' Show less' : ' Read more'}
+              </Button>
+            </>
           )}
         </div>
         {(withButtonLink) && (
diff --git a/src/compounds/Item/item.scss b/src/compounds/Item/item.scss
index 76b02d03..598a261b 100644
--- a/src/compounds/Item/item.scss
+++ b/src/compounds/Item/item.scss
@@ -12,3 +12,7 @@
   opacity: .8;
 }
 
+.mh-300 {
+  max-height: 300px;
+}
+

From 917ac59c85e69f2e87b095ea86432300f2c3af7a Mon Sep 17 00:00:00 2001
From: Summer Cook <summer@scientist.com>
Date: Wed, 31 Jan 2024 17:01:24 -0800
Subject: [PATCH 2/3] only have expand ability if description is truncated

---
 src/compounds/Item/CardBody.jsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/compounds/Item/CardBody.jsx b/src/compounds/Item/CardBody.jsx
index fcce70ed..12af02b8 100644
--- a/src/compounds/Item/CardBody.jsx
+++ b/src/compounds/Item/CardBody.jsx
@@ -41,9 +41,11 @@ const CardBody = ({ buttonLink, buttonProps, item,
                   <div className='fw-light'>{description.slice(cutOffIndex).trimStart()}</div>
                 </Collapse>
               </div>
-              <Button variant="link" onClick={() => setOpen(!open)} className="p-0 mt-3">
-                {open ? ' Show less' : ' Read more'}
-              </Button>
+              { description.length > 300 && (
+                <Button variant="link" onClick={() => setOpen(!open)} className="p-0 mt-3">
+                  {open ? ' Show less' : ' Read more'}
+                </Button>
+              )}
             </>
           )}
         </div>

From b27bcf5c311fd2c224002dd3620b2972005a5c9a Mon Sep 17 00:00:00 2001
From: Summer Cook <summer@scientist.com>
Date: Thu, 1 Feb 2024 09:35:53 -0800
Subject: [PATCH 3/3] fix spacing

---
 src/compounds/Item/CardBody.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/compounds/Item/CardBody.jsx b/src/compounds/Item/CardBody.jsx
index 12af02b8..0346b901 100644
--- a/src/compounds/Item/CardBody.jsx
+++ b/src/compounds/Item/CardBody.jsx
@@ -41,7 +41,7 @@ const CardBody = ({ buttonLink, buttonProps, item,
                   <div className='fw-light'>{description.slice(cutOffIndex).trimStart()}</div>
                 </Collapse>
               </div>
-              { description.length > 300 && (
+              {description.length > 300 && (
                 <Button variant="link" onClick={() => setOpen(!open)} className="p-0 mt-3">
                   {open ? ' Show less' : ' Read more'}
                 </Button>