improve responsiveness when displaying a member

components/member/Card.vue

@@ -65,16 +65,34 @@ export default {
 }
 </script>
 
-<style lang="sass" scoped>
-.member
-  th
-    text-align: right
+<style lang="scss">
+.member {
+    .table {
+        text-align: center;
+        width: auto;
+        margin: auto;
+        
+        tr {
+            display: flex;
+            flex-direction: column;
+
+
+        }
+    }
+
+    
+}
+
+@media (min-width:576px) {
+    .member {
+        .table {
+            tr {display: table-row;}
+            th {text-align: right;}
+            td {text-align: left;}
+
+        }
+    }
+}
+
 
-.table
-    width: auto
-    margin: auto
-    td
-        min-width: 200px
-    th
-        min-width: 250px
 </style>
\ No newline at end of file

pages/membres/_hash.vue

@@ -19,13 +19,13 @@
               <h3 class="h4 text-center" :class="{
                 'text-success' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length>=5,
                 'text-danger' : ['NEWCOMER','MISSING'].includes(idFromHash.status) && idFromHash.received_certifications.certifications.length<5,
-              }">{{ $t('certifications.recues') }} ({{ nbCertifs('received') }}<span v-if="nbCertifsPending('received') != 0">{{ ' + ' + nbCertifsPending('received') }}</span>)
+              }">{{ $t('certifications.recues') }} ({{ nbCertifs('received') }}<span v-if="nbCertifsPending('received') != 0">{{ '&nbsp;+&nbsp;' + nbCertifsPending('received') }}</span>)
                 <BadgeCertifStatus :limitDate="idFromHash.received_certifications.limit" :memberStatus="idFromHash.status" />
               </h3>
               <CertifList :certifs="idFromHash.received_certifications.certifications" type="received" />
             </div>
             <div class="col-sm-10 col-md-7 col-lg-5 mx-auto" v-if="['MISSING','MEMBER'].includes(idFromHash.status)">
-              <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{nbCertifs('sent') }}<span v-if="nbCertifsPending('sent') != 0">{{ ' + ' + nbCertifsPending('sent') }}</span>)</h3>
+              <h3 class="h4 text-center">{{ $t('certifications.envoyees') }} ({{nbCertifs('sent') }}<span v-if="nbCertifsPending('sent') != 0">{{ '&nbsp;+&nbsp;' + nbCertifsPending('sent') }}</span>)</h3>
               <CertifList :certifs="idFromHash.sent_certifications" type="sent" />
             </div>
           </div>