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

@@ -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;
   }
-}
+}