From d3a620e420b393f31ade1a1ebb3d1a34a3d5db34 Mon Sep 17 00:00:00 2001
From: ghalestrilo <ghalestrilo@gmail.com>
Date: Tue, 4 Aug 2020 16:57:24 -0300
Subject: [PATCH] :lipstick: limit width of right-aligned cells

---
 client/modules/IDE/components/SketchList.jsx  |  4 +---
 client/modules/Mobile/MobileDashboardView.jsx | 23 ++++++++++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/client/modules/IDE/components/SketchList.jsx b/client/modules/IDE/components/SketchList.jsx
index 38f69f8b..9fa5d478 100644
--- a/client/modules/IDE/components/SketchList.jsx
+++ b/client/modules/IDE/components/SketchList.jsx
@@ -23,9 +23,7 @@ import ArrowDownIcon from '../../../images/sort-arrow-down.svg';
 import DownFilledTriangleIcon from '../../../images/down-filled-triangle.svg';
 
 
-const formatDateCell = (date, mobile = false) =>
-  format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A')
-    .replace(', ', mobile ? '\n' : ', ');
+const formatDateCell = (date, mobile = false) => format(new Date(date), mobile ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A');
 
 class SketchListRowBase extends React.Component {
   constructor(props) {
diff --git a/client/modules/Mobile/MobileDashboardView.jsx b/client/modules/Mobile/MobileDashboardView.jsx
index f65b52bf..8d7cbf68 100644
--- a/client/modules/Mobile/MobileDashboardView.jsx
+++ b/client/modules/Mobile/MobileDashboardView.jsx
@@ -20,7 +20,12 @@ import Button from '../../common/Button';
 const EXAMPLE_USERNAME = 'p5';
 
 const ContentWrapper = styled(Content)`
-  td,thead button {
+  table {
+    table-layout: fixed;
+    /* white-space: nowrap; */
+  }
+  
+  td ,thead button {
     font-size: ${remSize(10)};
     padding-left: 0;
     text-align: left;
@@ -28,21 +33,27 @@ const ContentWrapper = styled(Content)`
 
   thead th { padding-left: 0; }
 
-  tbody th {
+  thead th:not(:first-child) {
+    width: 48px !important;
+}
+
+  .sketches-table__row th {
     font-size: ${remSize(12)};
-    /* font-weight: bold; */
     width: 100%;
-    max-width: 70%;
+    padding-right: ${remSize(12)}
   };
 
+  .sketches-table__row td {
+    text-align: center;
+    width: ${remSize(24)} !important;
+  }
+
   .sketch-list__sort-button { padding: 0 }
   .sketches-table__row {
     height: ${remSize(48)};
   }
 
   .sketches-table-container { padding-bottom: ${remSize(160)} }
-
-  /* td.sketch-list__dropdown-column { min-width: unset; } */
 `;
 
 const FooterTab = styled(Link)`