Merge branch 'feature/mobile-examples' of https://github.com/ghalestrilo/p5.js-web-editor into feature/mobile-files-tab

Author: ghalestrilo

client/modules/Mobile/MobileDashboardView.jsx

@@ -31,11 +31,9 @@ const ContentWrapper = styled(Content)`
   
   td ,thead button {
     font-size: ${remSize(10)};
-    padding-left: 0;
     text-align: left;
   };
 
-
   tbody th {
     font-size: ${remSize(16)};
     width: 100%;
@@ -46,17 +44,20 @@ const ContentWrapper = styled(Content)`
   };
 
   tbody td, thead th {
-    justify-self: stretch;
+    justify-self: center;
     align-self: flex-end;
     color: ${prop('primaryTextColor')}
   }
 
-  tbody td { justify-self: center; padding-left: ${remSize(12)}}
 
   thead th svg { margin-left: ${remSize(8)} }
   
-  tbody td:last-child { justify-self: end; text-align: end; };
-  .sketches-table .sketch-list__dropdown-column { min-width: unset };
+  
+  tbody td              { justify-self: start; text-align: start; padding: 0 }
+  tbody td:nth-child(2) { justify-self: start;  text-align: start; padding-left: ${remSize(12)}};
+  tbody td:last-child   { justify-self: end;    text-align: end; };
+
+  .sketch-list__dropdown-column { width: auto; };
 
   tbody { height: ${remSize(48)}; }
 
@@ -65,8 +66,11 @@ const ContentWrapper = styled(Content)`
     background: ${prop('SketchList.background')};
     }
   .sketches-table__row {
-    background: ${prop('SketchList.card.background')} !important; height: auto
+    background: ${prop('SketchList.card.background')} !important;
+    height: auto
   }
+  
+
 
   tr {
     align-self: start;
@@ -75,17 +79,18 @@ const ContentWrapper = styled(Content)`
   };
 
   thead tr {
-    grid-template-columns: auto ${remSize(100)} ${remSize(100)} 0fr;
+    grid-template-columns: 1fr 1fr 1fr 0fr;
   }
 
   tbody tr {
     padding: ${remSize(8)};
     border-radius: ${remSize(4)};
-    grid-template-columns: 5fr 5fr 2fr;
+    grid-template-columns: 5fr 5fr 1fr;
     grid-template-areas: "name name name" "content content content";
   }
 
   .loader-container { position: fixed ; padding-bottom: 32% }
+
 `;
 
 const Subheader = styled.div`