Studio: revises HTML and styling around new unit ID on unit view

cms/static/sass/views/_unit.scss

@@ -747,6 +747,7 @@ body.unit {
 
 // Unit Page Sidebar
 .unit-settings {
+
   .window-contents {
     padding: $baseline/2 $baseline;
   }
@@ -854,6 +855,24 @@ body.unit {
 }
 
 .unit-location {
+
+  // unit id
+  .wrapper-unit-id {
+
+    .unit-id {
+
+      .label {
+        @extend .t-title7;
+        margin-bottom: ($baseline/4);
+        color: $gray-d1;
+      }
+
+      .value {
+        margin-bottom: 0;
+      }
+    }
+  }
+
   .url {
     box-shadow: none;
     width: 100%;

cms/templates/unit.html

@@ -171,7 +171,12 @@
         <div class="window unit-location">
           <h4 class="header">${_("Unit Location")}</h4>
           <div class="window-contents">
-            <div>${_("Unit Identifier:")}&nbsp;<input type="text" class="url" value="${unit.location.name}" disabled /></div>
+            <div class="row wrapper-unit-id">
+              <p class="unit-id">
+                <span class="label">${_("Unit Identifier:")}</span>
+                <input type="text" class="url value" value="${unit.location.name}" disabled />
+              </p>
+            </div>
             <ol>
               <li>
                 <a href="#" class="section-item">${section.display_name_with_default}</a>