Fixing vote table description text overflows (#261)

Co-authored-by: Brian Ledbetter <[email protected]>

Author: BrianL3

src/components/Tables/MeetingVotesTable/MeetingVotesTable.stories.tsx

@@ -50,13 +50,31 @@ SingleLegislationVote.args = {
   ],
 };
 
+export const VoteOnLegislationWithLongDescription = Template.bind({});
+VoteOnLegislationWithLongDescription.args = {
+  votesPage: [
+    {
+      matter: {
+        id: "example-legislation-id",
+        description:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Urna nec tincidunt praesent semper feugiat nibh. Morbi non arcu risus quis varius quam quisque. Posuere morbi leo urna molestie at elementum eu. Cras adipiscing enim eu turpis egestas pretium aenean pharetra magna. Urna molestie at elementum eu facilisis sed odio. Odio tempor orci dapibus ultrices in iaculis nunc. Sed risus ultricies tristique nulla aliquet enim. Et leo duis ut diam quam nulla porttitor massa id. Lorem ipsum dolor sit amet consectetur. Imperdiet proin fermentum leo vel orci porta non. Dui sapien eget mi proin sed libero enim sed. Amet purus gravida quis blandit turpis cursus. Cras fermentum odio eu feugiat pretium nibh ipsum consequat nisl. Aliquam sem et tortor consequat. Nunc pulvinar sapien et ligula ullamcorper. Ut sem viverra aliquet eget sit amet tellus. A diam sollicitudin tempor id. Id semper risus in hendrerit. Elementum nibh tellus molestie nunc non blandit massa enim nec. Mattis enim ut tellus elementum sagittis. Vitae suscipit tellus mauris a diam maecenas sed. Sem viverra aliquet eget sit. Amet nulla facilisi morbi tempus iaculis urna id. Id interdum velit laoreet id donec ultrices tincidunt arcu. Fermentum iaculis eu non diam. Dis parturient montes nascetur ridiculus mus mauris. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Tortor at auctor urna nunc id cursus metus aliquam. Sed vulputate mi sit amet mauris commodo quis imperdiet massa. Rhoncus urna neque viverra justo nec ultrices dui. Senectus et netus et malesuada. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum est. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Vel facilisis volutpat est velit. Venenatis tellus in metus vulputate eu scelerisque felis. Nec ultrices dui sapien eget. Vitae justo eget magna fermentum iaculis eu non diam phasellus. Risus at ultrices mi tempus imperdiet nulla malesuada. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Aliquet enim tortor at auctor urna nunc id cursus. Posuere sollicitudin aliquam ultrices sagittis orci a.",
+        name: "IRC 8",
+      },
+      date: new Date(),
+      council_decision: generateCouncilDecision(),
+      votes: generateVotes(),
+    },
+  ],
+};
+
 export const SingleBrokenLegislationRow = Template.bind({});
 SingleBrokenLegislationRow.args = {
   votesPage: [
     {
       matter: {
         id: "example-legislation-id",
-        description: "A description of the legislation",
+        description:
+          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
         name: "IRC 189",
       },
       date: new Date(),

src/components/Tables/MeetingVotesTableRow/MeetingVotesTableRow.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from "react";
+import styled from "@emotion/styled";
+
 import DecisionResult from "../../Shared/DecisionResult";
 import { EVENT_MINUTES_ITEM_DECISION, VOTE_DECISION } from "../../../models/constants";
 import { TAG_CONNECTOR } from "../../../constants/StyleConstants";
@@ -28,6 +30,17 @@ type MeetingVotesTableRowProps = {
   columnDistribution: string[];
 };
 
+const DescriptionBlock = styled.p<{ minified: boolean; linesToShow: number }>((props) => ({
+  overflow: "hidden",
+  "text-overflow": "ellipsis",
+  display: "-webkit-box",
+  "-webkit-line-clamp": props.minified
+    ? `${props.linesToShow}`
+    : "none" /* number of lines to show, 'none' means no limit */,
+  "line-clamp": props.minified ? `${props.linesToShow}` : "none",
+  "-webkit-box-orient": "vertical",
+}));
+
 function VoteCell(votes: IndividualMeetingVote[], isMobile: boolean) {
   const [expanded, setExpanded] = useState(false);
   let votesFor = 0;
@@ -114,6 +127,7 @@ const MeetingVotesTableRow = ({
   columnNames,
   columnDistribution,
 }: MeetingVotesTableRowProps) => {
+  const [minified, setMinified] = useState(true);
   const isMobile = useMediaQuery({ query: `(max-width: ${screenWidths.tablet})` });
 
   return (
@@ -129,7 +143,17 @@ const MeetingVotesTableRow = ({
             {legislationName}
           </p>
         </Link>
-        {!isMobile && <p>{legislationDescription}</p>}
+        {!isMobile && (
+          <DescriptionBlock
+            onClick={() => {
+              setMinified(!minified);
+            }}
+            minified={minified}
+            linesToShow={3}
+          >
+            {legislationDescription}
+          </DescriptionBlock>
+        )}
       </div>
       <DecisionResult result={councilDecision} />
       {VoteCell(votes, isMobile)}