SONAR-9434 Allow error messages to display on more than one line.

diff --git a/server/sonar-web/src/main/js/apps/settings/components/Definition.js b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
index 76498574df1c41c9f9da41c1fc3f34f507c3133b..cc30120bb5bca09f951d0e9ba094031230f4e53e 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/components/Definition.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
@@ -152,51 +152,47 @@ class Definition extends React.PureComponent {
         </div>
 
         <div className="settings-definition-right">
-          <Input setting={setting} value={effectiveValue} onChange={this.handleChange.bind(this)} />
-
-          {!hasValueChanged &&
-            <DefinitionDefaults
-              setting={setting}
-              isDefault={isDefault}
-              onReset={() => this.handleReset()}
-            />}
-
-          {hasValueChanged &&
-            <DefinitionChanges
-              onSave={this.handleSave.bind(this)}
-              onCancel={this.handleCancel.bind(this)}
-            />}
-
           <div className="settings-definition-state">
             {loading &&
               <span className="text-info">
-                <span className="settings-definition-state-icon">
-                  <i className="spinner" />
-                </span>
+                <i className="spinner spacer-right" />
                 {translate('settings.state.saving')}
               </span>}
 
             {!loading &&
               this.props.validationMessage != null &&
               <span className="text-danger">
-                <span className="settings-definition-state-icon">
-                  <i className="icon-alert-error" />
+                <i className="icon-alert-error spacer-right" />
+                <span>
+                  {translateWithParameters(
+                    'settings.state.validation_failed',
+                    this.props.validationMessage
+                  )}
                 </span>
-                {translateWithParameters(
-                  'settings.state.validation_failed',
-                  this.props.validationMessage
-                )}
               </span>}
 
             {!loading &&
               this.state.success &&
               <span className="text-success">
-                <span className="settings-definition-state-icon">
-                  <i className="icon-check" />
-                </span>
+                <i className="icon-check spacer-right" />
                 {translate('settings.state.saved')}
               </span>}
           </div>
+
+          <Input setting={setting} value={effectiveValue} onChange={this.handleChange.bind(this)} />
+
+          {!hasValueChanged &&
+            <DefinitionDefaults
+              setting={setting}
+              isDefault={isDefault}
+              onReset={() => this.handleReset()}
+            />}
+
+          {hasValueChanged &&
+            <DefinitionChanges
+              onSave={this.handleSave.bind(this)}
+              onCancel={this.handleCancel.bind(this)}
+            />}
         </div>
       </div>
     );

diff --git a/server/sonar-web/src/main/js/apps/settings/styles.css b/server/sonar-web/src/main/js/apps/settings/styles.css
index c3d0a6588b8b8a378480fb1dea97f3b838adbb89..45d1f77909cf46d5a3c194a8a8b57c8d09111cc4 100644 (file)
--- a/server/sonar-web/src/main/js/apps/settings/styles.css
+++ b/server/sonar-web/src/main/js/apps/settings/styles.css
@@ -28,7 +28,6 @@
 .settings-definition-right {
   position: relative;
   width: calc(100% - 330px);
-  padding-top: 35px;
   box-sizing: border-box;
 }
 
@@ -48,29 +47,12 @@
 }
 
 .settings-definition-state {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  line-height: 24px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  min-height: 32px;
+  padding-bottom: 4px;
 }
 
-.settings-definition-state-icon {
-  display: inline-block;
-  vertical-align: middle;
-  width: 24px;
-  height: 24px;
-  margin-right: 8px;
-  text-align: center;
-}
-
-.settings-definition-state-icon > .icon-alert-error,
-.settings-definition-state-icon > .spinner {
-  position: relative;
-  top: -2px;
+.settings-definition-state > span {
+  display: flex;
 }
 
 .settings-definition-changes {