Adjust width so as not to be hidden by "help element”

At the moment, a part of description written on the top of each step
in ng-launch instance modal is hidden by help-element.
This patch will fix it by adjusting a description width.

Change-Id: Idab7536e046ec4b49a70c9ae96f45a3f4c36b029
Closes-bug: #1562495
Closes-bug: #1557817

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/configuration/configuration.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceConfigurationController as config">
-  <p translate>
+  <p class="step-description" translate>
     You can customize your instance after it has launched using the options available here.
     "Customization Script" is analogous to "User Data" in other systems.
   </p>

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceDetailsController as ctrl">
-  <p translate>Please provide the initial hostname for the instance, the availability zone where it will be deployed, and the instance count.
+  <p class="step-description" translate>Please provide the initial hostname for the instance, the availability zone where it will be deployed, and the instance count.
     Increase the Count to create multiple instances with the same settings.</p>
 
   <div class="row">

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/flavor/flavor.html

@@ -13,7 +13,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 -->
 <div ng-controller="LaunchInstanceFlavorController as selectFlavorCtrl">
-  <p translate>
+  <p class="step-description" translate>
     Flavors manage the sizing for the compute, memory and storage capacity of the instance.
   </p>
   <transfer-table

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/keypair/keypair.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceKeypairController as ctrl">
-  <p translate>
+  <p class="step-description" translate>
     A key pair allows you to SSH into your newly created instance.
     You may select an existing key pair, import a key pair, or generate a new key pair.
   </p>

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/metadata/metadata.html

@@ -1,4 +1,4 @@
-<p translate>
+<p class="step-description" translate>
   This step allows you to add Metadata items to your instance.
 </p>
 

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/network/network.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceNetworkController as ctrl">
-  <p translate>
+  <p class="step-description" translate>
     Networks provide the communication channels for instances in the cloud.
   </p>
 

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/networkports/ports.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceNetworkPortController as ctrl">
-  <p translate>
+  <p class="step-description" translate>
     Ports provide extra communication channels to your instances. You can select ports instead of networks or a mix of both.
   </p>
 

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/security-groups/security-groups.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceSecurityGroupsController as ctrl">
-  <p translate>Select the security groups to launch the instance in.</p>
+  <p class="step-description" translate>Select the security groups to launch the instance in.</p>
 
   <transfer-table tr-model="ctrl.tableData"
                   help-text="ctrl.tableHelp"

openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/source/source.html

@@ -1,5 +1,5 @@
 <div ng-controller="LaunchInstanceSourceController as ctrl">
-  <p translate>
+  <p class="step-description" translate>
     Instance source is the template used to create an instance. You can use a snapshot of an existing instance, an image, or a volume (if enabled).
     You can also choose to use persistent storage by creating a new volume.
   </p>

openstack_dashboard/static/dashboard/scss/components/_modals.scss

@@ -59,4 +59,10 @@
     width: 100%;
     margin-bottom: 10px;
   }
+
+  // Subtract the help-button width and add the modal inner padding
+  // because the element is in the place which is applied the modal inner padding.
+  .step-description {
+    width: calc(100% - (#{$padding-xs-horizontal} * 2 + #{$font-size-h3}) + #{$modal-inner-padding});
+  }
 }