[DataTable] Remove fixed column UX

UNRELEASED.md

@@ -27,6 +27,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixes `monochrome` variant of `Link` and `Button` components to support multi-line link text ([#1686](https://github.com/Shopify/polaris-react/pull/1686))
+- Fixed the first column of `DataTable` not rendering in iOS Safari (([#1605](https://github.com/Shopify/polaris-react/pull/1605))
 
 ### Documentation
 

src/components/DataTable/DataTable.scss

@@ -1,18 +1,12 @@
-$fixed-column-width: rem(145px);
+$first-column-width: rem(145px);
 $breakpoint: 768px;
 
 .DataTable {
   position: relative;
   max-width: 100vw;
 }
 
-.collapsed {
-  .Table {
-    &::after {
-      display: block;
-    }
-  }
-
+.condensed {
   .Navigation {
     display: flex;
     align-items: center;
@@ -24,16 +18,6 @@ $breakpoint: 768px;
       justify-content: flex-end;
     }
   }
-
-  .ScrollContainer {
-    margin-left: rem($fixed-column-width);
-  }
-}
-
-.hasFooter {
-  .ScrollContainer {
-    margin-bottom: rem(52px);
-  }
 }
 
 .Navigation {
@@ -57,29 +41,12 @@ $breakpoint: 768px;
 
 .ScrollContainer {
   overflow-x: auto;
-  // account for a mysterious gap in Safari when not collapsed
-  margin-left: rem(140px);
   -webkit-overflow-scrolling: touch;
 }
 
 .Table {
   width: 100%;
   border-spacing: 0;
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: $fixed-column-width;
-    display: none;
-    width: rem(6px);
-    background: linear-gradient(
-      to right,
-      rgba(color('black'), 0.12),
-      rgba(color('black'), 0)
-    );
-  }
 }
 
 .TableRow {
@@ -90,10 +57,6 @@ $breakpoint: 768px;
   }
 }
 
-.TableFoot {
-  border-bottom: 0;
-}
-
 .Cell {
   padding: spacing();
   border-bottom: border-width() solid color('sky', 'light');
@@ -103,26 +66,21 @@ $breakpoint: 768px;
   vertical-align: top;
 }
 
-.Cell-numeric {
-  text-align: right;
-}
-
-.Cell-fixed {
+.Cell-firstColumn {
   @include text-emphasis-normal;
-  @include text-breakword;
-  position: absolute;
-  top: auto;
-  left: 0;
-  width: $fixed-column-width;
-  white-space: unset;
   text-align: left;
-  backface-visibility: hidden; // stops painting on scroll (due to positioning)
+  white-space: normal;
+}
+
+.Cell-numeric {
+  text-align: right;
 }
 
 .Cell-truncated {
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
+  max-width: $first-column-width;
 }
 
 .Cell-header {
@@ -180,16 +138,9 @@ $breakpoint: 768px;
   border-bottom: border();
 }
 
-.Cell-footer {
-  @include text-emphasis-normal;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  border-bottom: 0;
+.Footer {
+  padding: spacing();
   background: color('sky', 'light');
   color: color('ink', 'lighter');
-  white-space: unset;
   text-align: center;
-  backface-visibility: hidden; // stop painting on scroll (due to positioning)
 }