Merge pull request #661 from zendesk/kristkvch/title-truncation

fix: apply word-break to prevent overflow

Author: kristkvch-zen

src/modules/service-catalog/components/service-catalog-item/CollapsibleDescription.tsx

@@ -22,6 +22,8 @@ const DescriptionWrapper = styled.div`
 const ItemTitle = styled(XXXL)`
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   margin-bottom: 0;
+  overflow-wrap: break-word;
+  max-width: 100%;
 `;
 
 const CollapsibleText = styled.div<{ isCollapsed: boolean }>`
@@ -32,6 +34,7 @@ const CollapsibleText = styled.div<{ isCollapsed: boolean }>`
   overflow: hidden;
   margin-top: ${(props) => props.theme.space.md};
   padding-inline-end: ${(props) => props.theme.space.xl};
+  overflow-wrap: break-word;
 
   @media (max-width: ${(props) => props.theme.breakpoints.md}) {
     padding-inline-end: 0;

src/modules/service-catalog/components/service-catalog-item/ItemRequestForm.tsx

@@ -72,6 +72,7 @@ const LeftColumn = styled.div`
   flex-direction: column;
   gap: ${(props) => props.theme.space.lg};
   margin-inline-end: ${(props) => props.theme.space.xl};
+  min-width: 0;
 
   @media (max-width: ${(props) => props.theme.breakpoints.md}) {
     margin-inline-end: 0;