From d0e1ded0416fdb08a0df5307865c8abad2375c4d Mon Sep 17 00:00:00 2001
From: Ryan Carbotte <ryan@boldcommerce.com>
Date: Thu, 9 Apr 2020 15:32:46 -0500
Subject: [PATCH] fix: Improved data table visibility on different devices

This change introduces new behavior for the data table.

If the device supports a fine pointer (mouse or touchpad) and a screen
width that is less than 1400px, we will set a max height on the table
allowing the horizontal scroll bar to be easily accessable.

If the device supports a coarse input (touch) we will not set a max
height on the table, because horizontal scrolling is a simple swipe.

If the device has a screen that is wider than 1400px we will not set a
max height on the table, as there would not be a horizontal scroll bar.
---
 css/styles.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 1f0a99f..61e642e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -35,6 +35,7 @@ h2 {
 
 .nook-phone {
   width: 100%;
+  max-width: 1400px;
   box-sizing: border-box;
   margin: 16px auto;
   border-radius: 40px;
@@ -300,6 +301,11 @@ input[type=number] {
   border-radius: 2px;
 }
 
+@media only screen and (max-width: 1440px) and (pointer: fine) {
+  .table-wrapper {
+    max-height: calc(75vh - 40px);
+  }
+}
 
 .table-wrapper::-webkit-scrollbar {
   height: 8px;
@@ -343,6 +349,7 @@ input[type=number] {
 }
 
 #turnipTable td {
+  white-space: nowrap;
   max-width: 100px;
   padding: 6px 4px;
   text-align: center;
@@ -360,7 +367,7 @@ input[type=number] {
 }
 
 #turnipTable .table-pattern {
-  white-space: normal;
+  white-space: nowrap;
 }
 
 
@@ -417,4 +424,4 @@ input[type=number] {
     height: 40px;
     min-height: 40px;
   }
-}
\ No newline at end of file
+}