style: improve line breaking for CJK text per MDN recomendations

Author: kristkvch-zen

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

@@ -13,7 +13,6 @@ const DescriptionWrapper = styled.div`
     ${(props) => getColorV8("grey", 300, props.theme)};
   padding-bottom: ${(props) => props.theme.space.lg};
   margin-inline-end: ${(props) => props.theme.space.xl};
-  word-break: break-all;
 
   @media (max-width: ${(props) => props.theme.breakpoints.md}) {
     margin-inline-end: 0;
@@ -23,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 }>`
@@ -33,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;