Tighten metadata layout and improve grouping (#2897)

* Tighten metadata layout and improve grouping

* Remove the headers

jdaviz/configs/default/plugins/metadata_viewer/metadata_viewer.vue

@@ -2,7 +2,7 @@
   <j-tray-plugin
     :description="docs_description || 'View metadata.'"
     :link="docs_link || 'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#metadata-viewer'"
-    :popout_button="popout_button"
+    :popout_button="popout_button"
     :scroll_to.sync="scroll_to">
 
     <!-- for specviz, we'll allow this to hide for a single entry, but since filters are being
@@ -35,19 +35,12 @@
           hide-details
         ></v-text-field>
       </v-row>
-
-      <v-row no-gutters>
-        <v-col cols=6><U><B>Key</B></U></v-col>
-        <v-col cols=6><U>Value</U></v-col>
-        <v-col v-if="has_comments" cols=6 class="text--secondary"><U>Comment</U></v-col>
-      </v-row>
       <v-row
         v-for="item in metadata.filter((item) => {return metadata_filter === null || item.join().toLowerCase().indexOf(metadata_filter.toLowerCase()) !== -1})"
         :key="item[0]"
         no-gutters>
-        <v-col cols=6><B>{{ item[0] }}</B></v-col>
-        <v-col cols=6>{{ item[1] }}</v-col>
-        <v-col v-if="has_comments" cols=6 class="text--secondary">{{ item[2] }}</v-col>
+        <v-col cols=12><B>{{ item[0] }}</B> | {{ item[1] }}</v-col>
+        <v-col v-if="has_comments" cols=12 class="text--secondary">{{ item[2] }}</v-col>
       </v-row>
     </div>
     <v-row v-else>