Eubopen Compoud: improve style of calculated properties

components/report_cards/chemical_probe/CalculatedProperties.vue

 <template>
   <v-card>
     <v-card-text>
-      <v-row>
-        <v-col cols="12" md="6">
+      <v-row dense no-gutters>
+        <v-col
+          v-for="item in properties"
+          :key="item.propLabel"
+          cols="12"
+          sm="6"
+          lg="4"
+          xl="3"
+        >
           <v-list dense>
-            <template v-for="item in properties1">
-              <v-list-item :key="item.propLabel">
-                <v-list-item-content>
-                  <v-list-item-title>
-                    <div class="d-flex justify-space-between">
-                      <div>
-                        <b>{{ item.propLabel }}:</b>
-                      </div>
-                      <div>
-                        {{ item.propValue }}
-                      </div>
+            <v-list-item :key="item.propLabel">
+              <v-list-item-content>
+                <v-list-item-title>
+                  <div class="d-flex justify-space-between">
+                    <div>
+                      <b>{{ item.propLabel }}:</b>
                     </div>
-                  </v-list-item-title>
-                </v-list-item-content>
-              </v-list-item>
-              <v-divider :key="`${item.propLabel}-divider`" />
-            </template>
-          </v-list>
-        </v-col>
-        <v-col cols="12" md="6">
-          <v-list dense>
-            <template v-for="item in properties2">
-              <v-list-item :key="item.propLabel">
-                <v-list-item-content>
-                  <v-list-item-title>
-                    <div class="d-flex justify-space-between">
-                      <div>
-                        <b>{{ item.propLabel }}:</b>
-                      </div>
-                      <div>
-                        {{ item.propValue }}
-                      </div>
+                    <div>
+                      {{ item.propValue }}
                     </div>
-                  </v-list-item-title>
-                </v-list-item-content>
-              </v-list-item>
-              <v-divider :key="`${item.propLabel}-divider`" />
-            </template>
+                  </div>
+                </v-list-item-title>
+              </v-list-item-content>
+            </v-list-item>
+            <v-divider :key="`${item.propLabel}-divider`" />
           </v-list>
         </v-col>
       </v-row>
@@ -53,7 +37,7 @@
 export default {
   data() {
     return {
-      properties1: [
+      properties: [
         {
           propLabel: 'Mol. Weight',
           propValue: '494.3',
@@ -94,8 +78,6 @@ export default {
           propLabel: 'HBA (Lipinski)',
           propValue: '4',
         },
-      ],
-      properties2: [
         {
           propLabel: 'HBD (Lipinski)',
           propValue: '1',

components/report_cards/chemical_probe/CellularAssayTargetEngagement.vue

 <template>
-  <v-card>
+  <v-card class="yellow lighten-4">
     <v-card-text>
       <p class="text-justify">
         In a NanoBRET cellular target engagement assay, PFI-6 displays potent

components/report_cards/chemical_probe/CrystalStructures.vue

 <template>
-  <v-card>
+  <v-card class="yellow lighten-4">
     <v-card-text>
       <v-img
         src="https://ars.els-cdn.com/content/image/1-s2.0-S0076687916300532-f12-03-9780128053478.jpg"

components/report_cards/chemical_probe/ProbeProfile.vue

 <template>
-  <v-card>
+  <v-card class="yellow lighten-4">
     <v-card-text>
       <EntityRelations />
     </v-card-text>