Wrap console text (#496)

* Wrap console text * Review * Add missing file
vmware-tanzu · Aug 17, 2018 · 2295d03 · 2295d03
1 parent 54bca50
commit 2295d03
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/dashboard/src/components/DeploymentForm/DeploymentForm.tsx b/dashboard/src/components/DeploymentForm/DeploymentForm.tsx
@@ -108,19 +108,17 @@ class DeploymentForm extends React.Component<IDeploymentFormProps, IDeploymentFo
     return (
       <div>
         <form className="container padding-b-bigger" onSubmit={this.handleDeploy}>
+          {this.props.error && (
+            <DeploymentErrors
+              {...this.props}
+              kubeappsNamespace={kubeappsNamespace}
+              chartName={chartID.split("/")[0]}
+              releaseName={releaseName}
+              repo={chartID.split("/")[1]}
+              version={version.attributes.version}
+            />
+          )}
           <div className="row">
-            <div className="col-8">
-              {this.props.error && (
-                <DeploymentErrors
-                  {...this.props}
-                  kubeappsNamespace={kubeappsNamespace}
-                  chartName={chartID.split("/")[0]}
-                  releaseName={releaseName}
-                  repo={chartID.split("/")[1]}
-                  version={version.attributes.version}
-                />
-              )}
-            </div>
             <div className="col-12">
               <h2>{this.props.chartID}</h2>
             </div>

diff --git a/dashboard/src/components/ErrorAlert/UnexpectedErrorAlert.css b/dashboard/src/components/ErrorAlert/UnexpectedErrorAlert.css
@@ -0,0 +1,3 @@
+.terminal__error {
+  word-break: break-all;
+}
diff --git a/dashboard/src/components/ErrorAlert/UnexpectedErrorAlert.tsx b/dashboard/src/components/ErrorAlert/UnexpectedErrorAlert.tsx
@@ -2,6 +2,7 @@ import * as React from "react";
 import { X } from "react-feather";
 
 import ErrorPageHeader from "./ErrorAlertHeader";
+import "./UnexpectedErrorAlert.css";
 
 interface IUnexpectedErrorPage {
   raw?: boolean;
@@ -35,8 +36,8 @@ class UnexpectedErrorPage extends React.Component<IUnexpectedErrorPage> {
       if (this.props.raw) {
         message = (
           <div className="error__content margin-l-enormous">
-            <section className="Terminal elevation-1">
-              <span className="type-color-white">{this.props.text}</span>
+            <section className="Terminal terminal__error elevation-1 type-color-white">
+              {this.props.text}
             </section>
           </div>
         );