Replaces Flex by Grid on Card and Thumbnail view modes, due to lack of alignment on last items.

src/admin/components/other/collections-modal.vue

@@ -10,7 +10,7 @@
             <section class="tainacan-form">
                  <p>{{ $i18n.get('instruction_select_a_target_collection') }}</p>
                 <div 
-                        v-if="!isLoading"
+                        v-if="!isLoading" 
                         class="collection-types-container">
                     <div
                             class="collection-type"

src/admin/scss/_view-mode-cards.scss

@@ -1,14 +1,19 @@
 .tainacan-cards-container {
     min-height: 50vh;
     padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    flex-shrink: 1;
+    display: -ms-grid;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 455px);
+    grid-gap: 0px;
     justify-content: space-evenly;
     animation-name: item-appear;
     animation-duration: 0.5s;
 
+    @media screen and (max-width: 480px) {    
+        width: 91.666666667%;  
+        grid-template-columns: repeat(auto-fill, 100%);
+    }
+
     .selected-card {
         background-color: $turquoise1;
         .metadata-title {

src/admin/scss/_view-mode-grid.scss

@@ -1,10 +1,10 @@
 .tainacan-grid-container {
     min-height: 50vh;
     padding: 0;
-    display: flex;
-    flex-wrap: wrap;
-    flex-grow: 1;
-    flex-shrink: 1;
+    display: -ms-grid;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 285px);
+    grid-gap: 0px;
     justify-content: space-evenly;
     animation-name: item-appear;
     animation-duration: 0.5s;
@@ -18,7 +18,6 @@
         flex-basis: 0;
         margin: 15px;
         text-align: center;
-        height: 100%;
 
         &:hover {
             background-color: $gray2;

src/js/store/modules/collection/actions.js

@@ -108,7 +108,7 @@ export const deleteItem = ({ commit }, { itemId, isPermanently }) => {
 
     });
 };
-
+ 
 export const fetchCollections = ({commit} , { page, collectionsPerPage, status }) => {
     return new Promise((resolve, reject) => {
         let endpoint = '/collections?paged='+page+'&perpage='+collectionsPerPage+'&context=edit';