From 03ced2bdb6e77ec0e774a3145978b44ab4cba171 Mon Sep 17 00:00:00 2001
From: kuzhelov <deckster@mail.ru>
Date: Tue, 5 Feb 2019 15:29:29 +0100
Subject: [PATCH] fix(chore): wrap error messages of docs code editor (#843)

* introduce error text wrapping styles

* update changelog
---
 CHANGELOG.md                                                    | 1 +
 .../ComponentDoc/ComponentExample/ComponentExample.tsx          | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7aaeaf138b..a5f7176316 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))
 - Update vulnerable version of `lodash` dependency  @kuzhelov ([#840](https://github.com/stardust-ui/react/pull/840))
 - Add `displayName` property to `Ref` and `Provider` components @layershifter ([#836](https://github.com/stardust-ui/react/pull/836))
+- Wrap error text of docs code editor @kuzhelov ([#843](https://github.com/stardust-ui/react/pull/843))
 
 <!--------------------------------[ v0.19.2 ]------------------------------- -->
 ## [v0.19.2](https://github.com/stardust-ui/react/tree/v0.19.2) (2019-02-01)
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 4548ce22b7..ae00a72664 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -415,7 +415,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
         {({ error }) =>
           error && (
             <Segment size="small" color="red" basic inverted padded secondary>
-              <pre>{error.toString()}</pre>
+              <pre style={{ whiteSpace: 'pre-wrap' }}>{error.toString()}</pre>
             </Segment>
           )
         }