Improve redraw performance

It’s noticeable when clicking from row to row in the spreadsheet that
the page jumps around a fair bit on load because there are a couple of
Javascript-powered components.

This commit makes sure:
- the radio select component doesn’t change height when rendering for
  the first time
- the scrollable table doesn’t show parts of the table that should be
  hidden by overflow for a fraction of second before all the JS has
  run
- the right-hand shadow on horizontally scrollable tables doesn’t fade
  in on initial page load but shows at 100% opacity immediately

app/assets/javascripts/fullscreenTable.js

@@ -52,7 +52,8 @@
             'height': this.nativeHeight,
             'top': this.topOffset
           })
-        );
+        )
+        .css('position', 'absolute');
 
       this.$scrollableTable = this.$component.find('.fullscreen-scrollable-table');
       this.$fixedTable = this.$component.find('.fullscreen-fixed-table');
@@ -100,6 +101,11 @@
           this.$scrollableTable.scrollLeft() < (this.$table.width() - this.$scrollableTable.width())
         );
 
+      setTimeout(
+        () => this.$component.find('.fullscreen-right-shadow').addClass('with-transition'),
+        3000
+      );
+
     };
 
   };

app/assets/stylesheets/components/fullscreen-table.scss

@@ -6,8 +6,7 @@
     z-index: 10;
     overflow-y: hidden;
     box-sizing: border-box;
-    position: absolute;
+    margin: 0 0 $gutter 0;
-    margin: 5px 0 $gutter 0;
     padding: 0 0 0 0;
     overflow: hidden;
     border-bottom: 1px solid $border-colour;
@@ -42,8 +41,13 @@
     z-index: 200;
 
     &.visible {
-      transition: box-shadow 0.3s ease-in-out;
+
+      &.with-transition {
+        transition: box-shadow 0.6s ease-out;
+      }
+
       box-shadow: inset -1px 0 0 0 $border-colour, inset -3px 0 0 0 rgba($border-colour, 0.2);
+
     }
 
   }

app/assets/stylesheets/components/radio-select.scss

@@ -1,5 +1,7 @@
 .radio-select {
 
+  min-height: 39px;
+
   &-column {
 
     display: inline-block;