feat: Make card descriptions expandable

client/src/components/cards/CardModal/ProjectContent.jsx

@@ -30,7 +30,7 @@ import SelectCardTypeStep from '../SelectCardTypeStep';
 import EditDueDateStep from '../EditDueDateStep';
 import EditStopwatchStep from '../EditStopwatchStep';
 import MoveCardStep from '../MoveCardStep';
-import Markdown from '../../common/Markdown';
+import ExpandableMarkdown from '../../common/ExpandableMarkdown';
 import EditMarkdown from '../../common/EditMarkdown';
 import ConfirmationStep from '../../common/ConfirmationStep';
 import UserAvatar from '../../users/UserAvatar';
@@ -521,7 +521,7 @@ const ProjectContent = React.memo(({ onClose }) => {
                           <Button className={styles.editButton}>
                             <Icon fitted name="pencil" size="small" />
                           </Button>
-                          <Markdown>{card.description}</Markdown>
+                          <ExpandableMarkdown>{card.description}</ExpandableMarkdown>
                         </div>
                       ) : (
                         <button
@@ -536,7 +536,7 @@ const ProjectContent = React.memo(({ onClose }) => {
                       ))}
                   </>
                 )}
-                {!canEditDescription && <Markdown>{card.description}</Markdown>}
+                {!canEditDescription && <ExpandableMarkdown>{card.description}</ExpandableMarkdown>}
               </div>
             </div>
           )}

client/src/components/common/ExpandableMarkdown/ExpandableMarkdown.jsx

@@ -0,0 +1,78 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, Icon } from 'semantic-ui-react';
+import { useToggle } from '../../../lib/hooks';
+
+import Markdown from '../Markdown';
+
+import styles from './ExpandableMarkdown.module.scss';
+
+const MAX_VISIBLE_PART_HEIGHT = 800;
+
+const ExpandableMarkdown = React.memo(({ children }) => {
+  const [t] = useTranslation();
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const [isExpanded, toggleExpanded] = useToggle();
+
+  const contentRef = useRef(null);
+
+  const handleToggleExpandClick = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.target.blur();
+
+      toggleExpanded();
+    },
+    [toggleExpanded],
+  );
+
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      setIsOverflowing(contentRef.current.scrollHeight > MAX_VISIBLE_PART_HEIGHT);
+    });
+
+    resizeObserver.observe(contentRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  const isPartHidden = isOverflowing && !isExpanded;
+
+  return (
+    <>
+      <div
+        className={classNames(
+          styles.wrapper,
+          isExpanded && styles.wrapperExpanded,
+          isPartHidden && styles.wrapperPartHidden,
+        )}
+        style={{ maxHeight: `${MAX_VISIBLE_PART_HEIGHT}px` }}
+      >
+        <div ref={contentRef}>
+          <Markdown>{children}</Markdown>
+        </div>
+      </div>
+      {isOverflowing && (
+        <Button fluid className={styles.toggleButton} onClick={handleToggleExpandClick}>
+          <Icon name={isExpanded ? 'angle up' : 'angle down'} />
+          {isExpanded ? t('action.showLess') : t('action.showMore')}
+        </Button>
+      )}
+    </>
+  );
+});
+
+ExpandableMarkdown.propTypes = {
+  children: PropTypes.string.isRequired,
+};
+
+export default ExpandableMarkdown;

client/src/components/common/ExpandableMarkdown/ExpandableMarkdown.module.scss

@@ -0,0 +1,28 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .toggleButton {
+    box-shadow: none;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: center;
+  }
+
+  .wrapper {
+    overflow: hidden;
+  }
+
+  .wrapperExpanded {
+    max-height: none !important;
+    overflow: visible;
+  }
+
+  .wrapperPartHidden {
+    mask-image: linear-gradient(180deg, #000 80%, transparent);
+    -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent);
+  }
+}

client/src/components/common/ExpandableMarkdown/index.js

@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import ExpandableMarkdown from './ExpandableMarkdown';
+
+export default ExpandableMarkdown;

client/src/locales/de-DE/core.js

@@ -416,6 +416,8 @@ export default {
       showCardsWithThisUser: 'Karten mit diesem Benutzer zeigen',
       showDeactivated: 'Deaktivierte anzeigen',
       showFewerAttachments: 'Weniger Anhänge anzeigen',
+      showLess: 'Weniger anzeigen',
+      showMore: 'Mehr anzeigen',
       sortList_title: 'Liste sortieren',
       start: 'Start',
       stop: 'Stopp',

client/src/locales/en-GB/core.js

@@ -424,6 +424,8 @@ export default {
       showCardsWithThisUser: 'Show cards with this user',
       showDeactivated: 'Show deactivated',
       showFewerAttachments: 'Show fewer attachments',
+      showLess: 'Show less',
+      showMore: 'Show more',
       sortList_title: 'Sort List',
       start: 'Start',
       stop: 'Stop',

client/src/locales/en-US/core.js

@@ -419,6 +419,8 @@ export default {
       showCardsWithThisUser: 'Show cards with this user',
       showDeactivated: 'Show deactivated',
       showFewerAttachments: 'Show fewer attachments',
+      showLess: 'Show less',
+      showMore: 'Show more',
       sortList_title: 'Sort List',
       start: 'Start',
       stop: 'Stop',