Realigning some components on the show page (#954)

* re-aligning some components within the Project Settings div

* adding css id back to project id

app/assets/stylesheets/_settings.scss

@@ -117,6 +117,17 @@
     margin-right: 23em;
     margin-left: 23.5em;
   }
+  .approved-details{
+    dt {
+      float: left;
+      min-width: calc(25% + 55px);
+      /* adjust the width; make sure the total of both is 100% */
+      padding: 0;
+      margin: 0;
+      margin-left: 1em;
+      clear: both
+    }
+  }
   h2 {// Heading for the details div
     margin-left: 0.2em;
     text-decoration: underline;
@@ -136,7 +147,7 @@
   }
   dt {
     float: left;
-    min-width: calc(25% + 5em);
+    min-width: calc(25% + 80px);
     /* adjust the width; make sure the total of both is 100% */
     padding: 0;
     margin: 0;

app/views/projects/_approved_details.html.erb

@@ -1,21 +1,26 @@
+
 <h2>Project Settings</h2>
 <dl>
-  <dt>Project ID</dt>&nbsp;<dd id="project_id"><%= @project_id %></dd>
+  <dt>Project ID</dt><dd id="project_id"><%= @project_id %></dd>
   <dt>Storage Capacity</dt>
     <dd><dl>
-      <dt>Requested</dt><dd><%= "#{@requested_size} #{@requested_unit}" %></dd>
-      <dt>Approved</dt><dd><%= "#{@approved_size} #{@approved_unit}" %></dd>
+      <div class="approved-details">
+        <dt>Requested</dt><dd><%= "#{@requested_size} #{@requested_unit}" %></dd>
+        <dt>Approved</dt><dd><%= "#{@approved_size} #{@approved_unit}" %></dd>
+      </div>
     </dl></dd>
   <dt>Storage Performance Expectations</dt>
   <dd><dl>
-    <dt>Requested</dt><dd><%= @requested_storage_expectations %></dd>
-    <dt>Approved</dt><dd><%= @approved_storage_expectations %></dd>
+    <div class="approved-details">
+      <dt>Requested</dt><dd><%= @requested_storage_expectations %></dd>
+      <dt>Approved</dt><dd><%= @approved_storage_expectations %></dd>
+    </div>
   </dl></dd>
-  <dt>Project Purpose</dt>&nbsp;<dd><%= @project_purpose %></dd>
+  <dt>Project Purpose</dt><dd><%= @project_purpose %></dd>
 </dl>
 <% if @project.in_mediaflux? && (current_user.superuser? || current_user.eligible_sysadmin?) %>
   <dl>
-    <dt>Mediaflux id:</dt>&nbsp;<dd><%= @project.mediaflux_id %></dd>
+    <dt>Mediaflux id:</dt><dd><%= @project.mediaflux_id %></dd>
   </dl>
 <% elsif !@project.in_mediaflux? %>
   <p>This project has not been saved to Mediaflux</p>