From c6c8c872269bcb52f8d53a5dede03f5b2469fefd Mon Sep 17 00:00:00 2001
From: "Jingwei.Zhang" <zhang.jingwei@99cloud.net>
Date: Fri, 12 Aug 2022 11:25:12 +0800
Subject: [PATCH] fix: update the style of tips in the form

1. Fixed the style of the tips to better display multi-line tips.
2. Remove the style of the tips in the Resize instance form

Change-Id: I69d78780ad07ecfb5d9a205ff9ffba82936cddeb
---
 src/components/Form/index.less                           | 4 +++-
 src/pages/compute/containers/Instance/actions/Resize.jsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/index.less b/src/components/Form/index.less
index 60a079d8..1bd60545 100644
--- a/src/components/Form/index.less
+++ b/src/components/Form/index.less
@@ -90,13 +90,15 @@
 }
 
 .tips {
+  display: flex;
   margin-bottom: 16px;
   padding: 8px 16px;
-  word-break: break-all;
+  word-break: break-word;
   background: rgba(0, 0, 0, 15%);
 }
 
 .tips-icon {
+  margin-top: 2px;
   margin-right: 4px;
   color: #0068ff;
 }
diff --git a/src/pages/compute/containers/Instance/actions/Resize.jsx b/src/pages/compute/containers/Instance/actions/Resize.jsx
index 1a564844..1b4e1d05 100644
--- a/src/pages/compute/containers/Instance/actions/Resize.jsx
+++ b/src/pages/compute/containers/Instance/actions/Resize.jsx
@@ -142,7 +142,7 @@ export class Resize extends ModalAction {
 
   get tips() {
     return (
-      <div style={{ display: 'inline-table' }}>
+      <div>
         <p style={{ color: '#0068FF' }}>
           {t('The current operation requires the instance to be shut down:')}
         </p>