Make big error alerts fit within the viewport. (#1266)

eclipse-xpanse · Nov 8, 2024 · e2e279c · e2e279c
1 parent e4aa909
commit e2e279c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/src/components/content/order/orderStatus/OrderSubmitResultDetails.tsx b/src/components/content/order/orderStatus/OrderSubmitResultDetails.tsx
@@ -43,7 +43,9 @@ function OrderSubmitResultDetails({ msg, uuid }: { msg: string | React.JSX.Eleme
                     </span>
                 </Paragraph>
             </div>
-            {msg}
+            <pre>
+                <div className={submitResultStyles.orderSubmitResultContent}>{msg}</div>
+            </pre>
         </div>
     );
 }

diff --git a/src/styles/submit-alert.module.css b/src/styles/submit-alert.module.css
@@ -7,4 +7,6 @@
     margin-bottom: 20px;
     margin-left: 30px;
     margin-right: 30px;
+    max-width: 100%;
+    overflow: hidden;
 }
diff --git a/src/styles/submit-result.module.css b/src/styles/submit-result.module.css
@@ -19,3 +19,8 @@
 .result-main-details {
     margin-bottom: 0 !important;
 }
+
+.order-submit-result-content {
+    white-space: pre-wrap;
+    word-break: break-all;
+}
-Original file line number
+Diff line change
@@ Expand Up @@
                         </span>
                     </Paragraph>
                 </div>
-                {msg}
+                <pre>
+                    <div className={submitResultStyles.orderSubmitResultContent}>{msg}</div>
+                </pre>
             </div>
         );
     }
@@ Expand Down @@