CUMULUS-2271 Allow horizontal scrolling on table columns (#897)

* CUMULUS-2271 set overflow on table columns

* CUMULUS-2271 update changelog

* CUMULUS-2271 allow scrollbar to expand table rows on hover

* CUMULUS-2271 fix changelog formatting

* CUMULUS-2271 force horizontal scrollbar to render on tables

CHANGELOG.md

@@ -37,13 +37,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - **CUMULUS-2251**
   - Add the `Granule Actions` button
 
-  **CUMULUS-2262**
+- **CUMULUS-2262**
   - Revised `Delete Granule` workflow to allow removing from CMR and then deleting in one step
 
-  **CUMULUS-2242**
+- **CUMULUS-2242**
   - Changes underlying Docker files for building dashboard bundle and dashboard image via docker.  The user interface remains the same.
 
-  **CUMULUS-2070**
+- **CUMULUS-2271**
+  - Allow horizontal scrolling in table cells when content doesn't fit in view
+
+- **CUMULUS-2070**
   - Styling changes included a small css refactor.
 
 ## [v3.0.0]

app/src/css/modules/_table.scss

@@ -34,10 +34,25 @@
         padding: 1em 2em;
         vertical-align: middle;
         overflow: hidden;
-        text-overflow: ellipsis;
-        /*&:first-of-type {
-          padding: 1em 0 1em 2em;
-        }*/
+        &:hover {
+          overflow: auto;
+        }
+
+        /*
+         * From https://stackoverflow.com/questions/7492062/css-overflow-scroll-always-show-vertical-scroll-bar/10100209#10100209
+         * The horizontal scrollbar does not always show, depending on the user's OS settings.
+         * This forces a bar to render.
+        */
+        &::-webkit-scrollbar {
+          -webkit-appearance: none;
+          height: 8px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+          border-radius: 4px;
+          background-color: rgba(0, 0, 0, .5);
+          box-shadow: 0 0 1px rgba(255, 255, 255, .5);
+        }
       }
       .table__main-asset {
         font-weight: $base-font-semibold;