Merge pull request #2806 from ONSdigital/EAR-1888-Wrap-Issue-Piped-An…

…swers EAR-1888 Wrapping issue with piped answers
ONSdigital · Nov 2, 2022 · 8ffae5d · 8ffae5d
2 parents bfad636 + e6bfe5f
commit 8ffae5d
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 23 deletions.
diff --git a/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js b/eq-author/src/App/introduction/Preview/IntroductionPreview/index.js
@@ -32,7 +32,7 @@ const Container = styled.div`
     background-color: #e0e0e0;
     padding: 0 0.125em;
     border-radius: 4px;
-    white-space: pre;
+    white-space: pre-wrap;
   }
 `;
 

diff --git a/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js b/eq-author/src/App/page/Preview/CalculatedSummaryPreview.js
@@ -33,7 +33,7 @@ const Container = styled.div`
     background-color: #e0e0e0;
     padding: 0 0.125em;
     border-radius: 4px;
-    white-space: pre;
+    white-space: pre-wrap;
   }
 `;
 

diff --git a/eq-author/src/App/page/Preview/ListCollectorPagePreview.js b/eq-author/src/App/page/Preview/ListCollectorPagePreview.js
@@ -42,7 +42,7 @@ const Container = styled.div`
     background-color: #e0e0e0;
     padding: 0 0.125em;
     border-radius: 4px;
-    white-space: pre;
+    white-space: pre-wrap;
   }
 `;
 

diff --git a/eq-author/src/App/page/Preview/QuestionPagePreview.js b/eq-author/src/App/page/Preview/QuestionPagePreview.js
@@ -36,7 +36,7 @@ const Container = styled.div`
     background-color: #e0e0e0;
     padding: 0 0.125em;
     border-radius: 4px;
-    white-space: pre;
+    white-space: pre-wrap;
   }
 `;
 

diff --git a/eq-author/src/App/questionConfirmation/Preview/index.js b/eq-author/src/App/questionConfirmation/Preview/index.js
@@ -40,7 +40,7 @@ const Container = styled.div`
   span[data-piped] {
     background-color: #5f7682;
     border-radius: 4px;
-    white-space: pre;
+    white-space: pre-wrap;
     color: white;
     padding: 0.1em 0.4em 0.2em;
   }

diff --git a/eq-author/src/App/section/Preview/SectionIntroPreview.js b/eq-author/src/App/section/Preview/SectionIntroPreview.js
@@ -24,7 +24,7 @@ const Wrapper = styled.div`
     background-color: #e0e0e0;
     padding: 0 0.125em;
     border-radius: 4px;
-    white-space: pre;
+    white-space: pre-wrap;
   }
 `;
 

diff --git a/eq-author/src/components-themed/panels/panel.js b/eq-author/src/components-themed/panels/panel.js
@@ -58,7 +58,7 @@ const successPanel = css`
 const Flex = styled.div`
   display: flex;
   justify-content: start;
-  align-items: center;
+  align-items: start;
   font-weight: ${({ bold }) => bold && "bold"};
   font-size: ${({ fontSize }) => fontSize};
 `;
@@ -180,7 +180,7 @@ const Panel = ({
       {variant === "warning" && (
         <Flex bold fontSize="18px">
           <WarningIcon>!</WarningIcon>
-          {children}
+          <div>{children}</div>
         </Flex>
       )}
       <Container variant={variant}>

diff --git a/eq-author/src/components/Forms/Tooltip/index.js b/eq-author/src/components/Forms/Tooltip/index.js
@@ -12,7 +12,7 @@ const StyledTooltip = styled(ReactTooltip)`
   line-height: 1 !important;
   padding: 0.4rem 0.6rem !important;
   border-radius: ${radius} !important;
-  white-space: pre;
+  white-space: pre-wrap;
 `;
 
 class Tooltip extends React.Component {

diff --git a/eq-author/src/components/RichTextEditor/__snapshots__/RichTextEditor.test.js.snap b/eq-author/src/components/RichTextEditor/__snapshots__/RichTextEditor.test.js.snap
@@ -87,7 +87,7 @@ exports[`components/RichTextEditor should allow multiline input 1`] = `
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -172,7 +172,7 @@ exports[`components/RichTextEditor should allow multiline input 1`] = `
                   "rules": Array [
                     "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                     "4px",
-                    ";white-space:pre;",
+                    ";white-space:pre-wrap;",
                   ],
                 },
                 "displayName": "PipedValue__PipedValueDecorator",
@@ -251,7 +251,7 @@ exports[`components/RichTextEditor should allow multiline input 1`] = `
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -416,7 +416,7 @@ exports[`components/RichTextEditor should render 1`] = `
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -501,7 +501,7 @@ exports[`components/RichTextEditor should render 1`] = `
                   "rules": Array [
                     "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                     "4px",
-                    ";white-space:pre;",
+                    ";white-space:pre-wrap;",
                   ],
                 },
                 "displayName": "PipedValue__PipedValueDecorator",
@@ -580,7 +580,7 @@ exports[`components/RichTextEditor should render 1`] = `
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -796,7 +796,7 @@ exports[`components/RichTextEditor should render existing content 1`] = `
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -889,7 +889,7 @@ exports[`components/RichTextEditor should render existing content 1`] = `
                   "rules": Array [
                     "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                     "4px",
-                    ";white-space:pre;",
+                    ";white-space:pre-wrap;",
                   ],
                 },
                 "displayName": "PipedValue__PipedValueDecorator",
@@ -1017,7 +1017,7 @@ exports[`components/RichTextEditor should render existing content 1`] = `
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -1184,7 +1184,7 @@ exports[`components/RichTextEditor should show as disabled and readonly when dis
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",
@@ -1269,7 +1269,7 @@ exports[`components/RichTextEditor should show as disabled and readonly when dis
                   "rules": Array [
                     "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                     "4px",
-                    ";white-space:pre;",
+                    ";white-space:pre-wrap;",
                   ],
                 },
                 "displayName": "PipedValue__PipedValueDecorator",
@@ -1348,7 +1348,7 @@ exports[`components/RichTextEditor should show as disabled and readonly when dis
                         "rules": Array [
                           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
                           "4px",
-                          ";white-space:pre;",
+                          ";white-space:pre-wrap;",
                         ],
                       },
                       "displayName": "PipedValue__PipedValueDecorator",

diff --git a/eq-author/src/components/RichTextEditor/entities/PipedValue.js b/eq-author/src/components/RichTextEditor/entities/PipedValue.js
@@ -19,7 +19,7 @@ const PipedValueDecorator = styled.span`
   background-color: #e0e0e0;
   padding: 0 0.125em;
   border-radius: ${radius};
-  white-space: pre;
+  white-space: pre-wrap;
 `;
 
 const PipedValueSerialized = ({ data: { id, text, pipingType, type } }) => (

diff --git a/eq-author/src/components/RichTextEditor/entities/__snapshots__/PipedValue.test.js.snap b/eq-author/src/components/RichTextEditor/entities/__snapshots__/PipedValue.test.js.snap
@@ -12,7 +12,7 @@ exports[`PipedValue decorator should render piped value entities 1`] = `
         "rules": Array [
           "background-color:#e0e0e0;padding:0 0.125em;border-radius:",
           "4px",
-          ";white-space:pre;",
+          ";white-space:pre-wrap;",
         ],
       },
       "displayName": "PipedValue__PipedValueDecorator",