fix(Table): 💄 Make horizontal scrolling work on iOS devices

* Change breakpoint from sm to md * Change overflow to scroll instead of auto on small screens * Add -webkit-overflow-scrolling: touch to make scrolling smoother on iOS
nordnet · Jun 5, 2017 · ba6981d · ba6981d
1 parent 9d1006e
commit ba6981d
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 7 deletions.
diff --git a/src/components/table/table-styles.jsx b/src/components/table/table-styles.jsx
@@ -7,8 +7,13 @@ export default createStyleSheet('Table', theme => {
   return {
     root: {
       width: '100%',
-      overflow: 'auto',
+      overflow: 'scroll',
+      '-webkit-overflow-scrolling': 'touch',
       position: 'relative',
+
+      [theme.mixins.media('md')]: {
+        overflow: 'auto',
+      },
     },
     table: {
       ...mixins.basicBoxSizing,

diff --git a/src/components/tbody/tbody-styles.jsx b/src/components/tbody/tbody-styles.jsx
@@ -11,9 +11,11 @@ export default createStyleSheet('Tbody', theme => {
       ...styleUtils.borders(palette),
       width: '100%',
       maxHeight: '70vh',
-      overflowY: 'auto',
+      overflow: 'scroll',
+      '-webkit-overflow-scrolling': 'touch',
 
-      [mixins.media('sm')]: {
+      [mixins.media('md')]: {
+        overflow: 'auto',
         maxHeight: '100%',
       },
 

diff --git a/src/components/td/td-styles.jsx b/src/components/td/td-styles.jsx
@@ -22,7 +22,7 @@ export default createStyleSheet('Td', theme => {
       paddingTop: 8,
       paddingBottom: 8,
 
-      [mixins.media('sm')]: {
+      [mixins.media('md')]: {
         fontSize: 14,
         minWidth: 40,
         paddingTop: 20,

diff --git a/src/components/th/th-styles.jsx b/src/components/th/th-styles.jsx
@@ -20,7 +20,7 @@ export default createStyleSheet('Th', theme => {
       minWidth: 20,
       paddingBottom: 4,
 
-      [mixins.media('sm')]: {
+      [mixins.media('md')]: {
         minWidth: 40,
         paddingBottom: 10,
       },

diff --git a/src/components/thead/thead-styles.jsx b/src/components/thead/thead-styles.jsx
@@ -18,7 +18,7 @@ export default createStyleSheet('Thead', theme => {
       fontSize: 12,
       paddingBottom: 4,
 
-      [mixins.media('sm')]: {
+      [mixins.media('md')]: {
         paddingBottom: 10,
       },
 

diff --git a/src/components/tr/tr-styles.jsx b/src/components/tr/tr-styles.jsx
@@ -34,7 +34,7 @@ export default createStyleSheet('Tr', theme => {
         background: palette.background.default,
       },
 
-      [mixins.media('sm')]: {
+      [mixins.media('md')]: {
         '&.sticky': {
           position: 'fixed',
         },