Fix the style and behavior of the selected card

client/pages/gwas.vue

@@ -9,27 +9,32 @@
 
     <section>
       <h2>Select an ancestry:</h2>
-      <v-row class="initmeta-card-list">
-        <v-col v-for="meta in initMetaList" :key="meta.name">
-          <v-card class="initmeta-card" :class="{ 'selected-table': selectedInitTable === meta.name }">
-            <v-card-title>{{ meta.name }}</v-card-title>
-            <v-card-text>{{ meta.desc }}</v-card-text>
-            <v-card-text>
-              <div>
-                <strong>{{ meta.nb_snps.toLocaleString() }}</strong>
-                SNPS
-              </div>
-              <div>
-                <strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong>
-                phenotypes
-              </div>
-            </v-card-text>
-            <v-card-actions class="card-buttons">
-              <v-btn class="button" color="primary" @click="selectAncestry('initTable.hdf5')">Select this ancestry</v-btn>
-            </v-card-actions>
-          </v-card>
-        </v-col>
-      </v-row>
+      <div class="initmeta-card-list">
+        <v-card
+          v-for="meta in initMetaList"
+          :key="meta.name"
+          class="initmeta-card"
+          :class="{ 'selected-table': selectedInitTable === meta.name }"
+          :color="selectedInitTable === meta.name ? 'blue lighten-4' : ''">
+          <v-card-title>{{ meta.name }}</v-card-title>
+          <v-card-text>{{ meta.desc }}</v-card-text>
+          <v-card-text>
+            <div>
+              <strong>{{ meta.nb_snps.toLocaleString() }}</strong>
+              SNPS
+            </div>
+            <div>
+              <strong>{{ meta.nb_phenotypes.toLocaleString() }}</strong>
+              phenotypes
+            </div>
+          </v-card-text>
+          <v-card-actions class="card-buttons">
+            <v-btn class="button" color="primary" @click="selectAncestry(meta.name)">
+              Select this ancestry
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </div>
     </section>
 
     <section v-show="phenotypes.length">
@@ -158,12 +163,13 @@ section h2 {
 
 .initmeta-card-list {
   display: flex;
+  flex-flow: row wrap;
+  gap: 20px;
   justify-content: center;
 }
 
-.selected-table {
-  border-color: #3b7fe0;
-  color: #3b7fe0;
+.initmeta-card {
+  width: 400px;
 }
 
 .card-title {