fix(app): fix protocol description text wrapping (#16104)

* fix(app): fix protocol description text wrapping
Opentrons · Aug 23, 2024 · 62c4b46 · 62c4b46
1 parent 9d98cfc
commit 62c4b46
Showing 1 changed file with 14 additions and 5 deletions.
diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -86,6 +86,12 @@ const GRID_STYLE = css`
   grid-template-columns: 26.6% 26.6% 26.6% 20.2%;
 `
 
+const TWO_COL_GRID_STYLE = css`
+  display: grid;
+  grid-gap: ${SPACING.spacing24};
+  grid-template-columns: 22.5% 77.5%;
+`
+
 const ZOOM_ICON_STYLE = css`
   border-radius: ${BORDERS.borderRadius4};
   &:hover {
@@ -130,7 +136,9 @@ function MetadataDetails({
         flexDirection={DIRECTION_COLUMN}
         data-testid="ProtocolDetails_description"
       >
-        <LegacyStyledText as="p">{description}</LegacyStyledText>
+        <LegacyStyledText as="p" overflowWrap={OVERFLOW_WRAP_ANYWHERE}>
+          {description}
+        </LegacyStyledText>
         {filteredMetaData.map((item, index) => {
           return (
             <React.Fragment key={index}>
@@ -165,9 +173,11 @@ const ReadMoreContent = (props: ReadMoreContentProps): JSX.Element => {
     : metadata.description
 
   return (
-    <Flex flexDirection={DIRECTION_COLUMN}>
+    <Flex flexDirection={DIRECTION_COLUMN} paddingRight={SPACING.spacing16}>
       {isReadMore ? (
-        <LegacyStyledText as="p">{description.slice(0, 160)}</LegacyStyledText>
+        <LegacyStyledText as="p" overflowWrap={OVERFLOW_WRAP_ANYWHERE}>
+          {description.slice(0, 160)}
+        </LegacyStyledText>
       ) : (
         <MetadataDetails
           description={description}
@@ -509,7 +519,7 @@ export function ProtocolDetails(
                 </Flex>
               </Flex>
               <Divider marginY={SPACING.spacing16} />
-              <Flex css={GRID_STYLE}>
+              <Flex css={TWO_COL_GRID_STYLE}>
                 <Flex
                   flexDirection={DIRECTION_COLUMN}
                   data-testid="ProtocolDetails_author"
@@ -519,7 +529,6 @@ export function ProtocolDetails(
                   </LegacyStyledText>
                   <LegacyStyledText
                     as="p"
-                    marginRight={SPACING.spacing20}
                     overflowWrap={OVERFLOW_WRAP_ANYWHERE}
                   >
                     {analysisStatus === 'loading'