OPSMN-6998: Fixed box scanner UI layout.

1) Each box field appears on a separate line.
2) Reduced margin between the different box fields.
3) Added a section header for box restriction fields to clearly demarcate what
the collection protocols and specimen types fields are meant for.

Author: vinayakapawar

ui/src/administrative/containers/ScanBoxes.vue

@@ -24,7 +24,7 @@
           </template>
 
           <template #content>
-            <ul class="os-key-values">
+            <ul class="os-key-values os-one-col">
               <li class="item">
                 <strong class="key key-sm">
                   <span v-t="{path: 'containers.' + ctx.scannedField}">Barcode</span>
@@ -51,6 +51,11 @@
                     :list-source="{queryParams: {static: {entityType: 'storage_container'}}}" />
                 </span>
               </li>
+              <li class="item section">
+                <strong class="key key-sm">
+                  <span v-t="'containers.box_restrictions'">Box Restrictions</span>
+                </strong>
+              </li>
               <li class="item">
                 <strong class="key key-sm">
                   <span v-t="'containers.collection_protocols'">Collection Protocols</span>
@@ -1019,7 +1024,11 @@ export default {
 }
 
 .os-key-values .item {
-  margin-bottom: 20px;
+  margin-bottom: 0.5rem;
+}
+
+.os-key-values .item.section .key {
+  font-weight: bold;
 }
 
 .os-container-occupant h4.title {

ui/src/i18n/en.json

@@ -515,6 +515,7 @@
     "box_name_not_detected": "Box name not detected. Manually input the box name.",
     "box_name_not_specified": "Box name not specified.",
     "box_details": "Box Details",
+    "box_restrictions": "Restrictions",
     "bulk_deleted": "Containers deleted successfully.",
     "cannot_read_barcodes": "Could not detect barcode of the specimens at the following locations: {locations}.",
     "capacity": "Capacity",